在 React 中切换后重新激活一个值答案

【问题标题】：Reactivate a value after toggling it in React在 React 中切换后重新激活一个值
【发布时间】：2018-02-26 10:25:42
【问题描述】：

我是 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 以及...

感谢您迄今为止的帮助！非常感谢，如有任何混淆，我们深表歉意。

【问题讨论】：

你只能使用一种状态进行管理，请提供一些html
如果禁用的值是一个常量，你可以这样做：<input value={disabled ? '0' : value} .../>
我不确定我是否理解。 'isEnabled' 有什么作用？它不控制是否显示值吗？ value 和 displayValue 有什么区别？请描述过程：例如您将值设置为 X 并将 isEnabled 设置为 true，这将显示该值。您将 isEnabled 更改为 false 等。
让你的代码更“优雅”的下一步是将每个工具+输入分离到它自己的组件中。让它有一个value 的道具和一个道具，它是一个事件处理程序，您可以在其中注入要更改父值的状态（值）:) 如果您想要一个示例，请告诉我 :)

标签： javascript reactjs logic

【解决方案1】：

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

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

working demo

【讨论】：