javascript - 在React中切换值后重新激活它

我是React的新手，我正在为这个问题而苦苦挣扎：

我的应用程序具有三个可选的数字输入，当我选择禁用它们时，将其值设置为0。但是，当我重新激活它们时，我希望它们恢复到其先前的状态（而不是0）。

我可能可以通过有两种状态来解决这个问题，一种具有实际值，一种正在显示，但是我不确定这是否是最好的方法。然后，我需要立即跟踪两个状态。我的应用程序具有足够的状态，并且我认为你们知道比我刚刚写的更好的解决方案。

this.state = {
    ...,
    optionals:  {
        A: {
            value: 800,
            displayValue: 0,
            isEnabled: false
        },
        B: {
            value: 27,
            displayValue: 27,
            isEnabled: true
        },
        C: {
            value: 90,
            displayValue: 90,
            isEnabled: true
        }
    }
}

另外，拥有如此嵌套的状态是否是错误的做法？

这是我对于可选输入的期望行为：
reactivating value



编辑：

这是当前的样子。我暂时选择了多米尼克·托比亚斯（Dominic Tobias）的答案。
应用程序的状态

this.state = {
    ...other things,
    optionals:  {
        A: {
            value: 800,
            isEnabled: false
        },
        B: {
            value: 27,
            isEnabled: true
        },
        C: {
            value: 90,
            isEnabled: true
        }
    }
}

HTML

<input type="number" defaultValue={this.state.optionals.A.value} onChange="this.onAChanged.bind(this)" />
<input type="number" defaultValue={this.state.optionals.B.value} onChange="this.onBChanged.bind(this)" />
<input type="number" defaultValue={this.state.optionals.C.value} onChange="this.onCChanged.bind(this)" />
<Chart data={
    [
        A.isEnabled ? A.value : 0,
        B.isEnabled ? B.value : 0,
        C.isEnabled ? C.value : 0
    ]
}/>
<Toggle onChange="this.toggleA.bind(this)"/>
<Toggle onChange="this.toggleB.bind(this)"/>
<Toggle onChange="this.toggleC.bind(this)"/>

onChange的方法

onAChange(e) {
    const{ value } = e.target;
    const AValue = value === '' ? this.state.optionals.A.value : Number(value);
    if(typeof AValue === 'number' && value >=1) {
    this.setState(prevState => (
        {
        ...prevState,
        optionals: {
            ...prevState.optionals,
            A: {
                ...prevState.optionals.A,
                value: Avalue
            }
        }
        }));
    }
}

toggleA(e) {
    const { checked } = e.target;

    this.setState(prevState => (
        {
            ...prevState,
            optionals: {
                ...prevState.optionals,
                A: {
                    ...prevState.optionals.A,
                    isEnabled: checked
                }
            }
        }));
}

Jayavel展示的几乎是我想要做的。 isEnabled将决定是否显示该值。
我所拥有的工作正常，但是方法似乎并不那么优雅，因为这些值是三个嵌套的层次。 onAChange，onBChange和onCChange都做相同的事情，有没有办法简化这一过程？以及toggleA，toggleB和toggleC ...


到目前为止，谢谢您的帮助！我真的很感激，对于任何混乱，我们深表歉意。

最佳答案

如果我理解正确，则需要以下内容：



那是你需要的吗？我对此进行了演示，并放了一些代码。这将帮助我们了解您的问题。

working demo