我是 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
以及...
感谢您迄今为止的帮助!非常感谢,对于任何混淆,我们深表歉意。
最佳答案
关于javascript - 在 React 中切换值后重新激活它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48986243/