Javascript 在React中切换值后重新激活该值
我是一个新的反应者,我正在努力解决这个问题: 我的应用程序有三个可选的数字输入,当我选择禁用它们时,我将它们的值设置为0。但是,当我重新激活它们时,我希望它们恢复到以前的状态(而不是0) 我可以通过两种状态来解决这个问题,一种是实际值,另一种是正在显示的状态,但我不确定这是否是最好的方式。然后我需要同时跟踪两个州。我的应用程序有足够的状态,我想你们知道一个比我刚才写的更好的解决方案Javascript 在React中切换值后重新激活该值,javascript,reactjs,logic,Javascript,Reactjs,Logic,我是一个新的反应者,我正在努力解决这个问题: 我的应用程序有三个可选的数字输入,当我选择禁用它们时,我将它们的值设置为0。但是,当我重新激活它们时,我希望它们恢复到以前的状态(而不是0) 我可以通过两种状态来解决这个问题,一种是实际值,另一种是正在显示的状态,但我不确定这是否是最好的方式。然后我需要同时跟踪两个州。我的应用程序有足够的状态,我想你们知道一个比我刚才写的更好的解决方案 this.state = { ..., optionals: { A: {
this.state = {
...,
optionals: {
A: {
value: 800,
displayValue: 0,
isEnabled: false
},
B: {
value: 27,
displayValue: 27,
isEnabled: true
},
C: {
value: 90,
displayValue: 90,
isEnabled: true
}
}
}
还有,有这么多嵌套的状态是一种不好的做法吗
以下是我对可选输入的期望行为:
编辑: 这就是它目前的样子。我暂时选择了多米尼克·托比亚斯的答案。
应用程序的状态
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)"/>
- 贾亚维尔所展示的正是我想要做的<代码>isEnabled将决定是否显示该值李>
- 我的方法很有效,但这些方法似乎不那么优雅,因为这些值是三个深度嵌套的级别
、onchange
和onBChange
都做同样的事情,有没有办法简化onCChange
,toggleA
,以及toggleB
李>toggleC
谢谢你迄今为止的帮助!我真的很感激,很抱歉给您带来任何困惑。如果我理解正确,您需要以下内容: 这就是你需要的吗?我做了一个演示,并放了一些代码。这将帮助我们了解你的问题所在
u只能使用一种状态进行管理,请提供一些htmlIf。如果禁用的值是一个常量,您只需执行即可:
我不确定是否理解。“isEnabled”是做什么的?它不控制是否显示该值吗?值和显示值之间的区别是什么?请描述该过程:例如,您将值设置为X并将isEnabled设置为true,这将显示该值。您可以将isEnabled更改为false等。使代码更“优雅”的下一步是将每个toogle+输入分离到自己的组件中。让它有一个用于值的prop和一个作为事件处理程序的prop,您可以在其中插入要在父级值中更改的状态(值):)如果需要示例,请告诉我:)
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
}
}
}));
}