Reactjs 表单中的反应相关字段

我的

react

应用程序中有一个表单

表单有几个相互依赖的字段。例如：

在此示例中，

网络攻击检测

仅在

分发类型

设置为

始终打开时可见

表单值保存在组件本地状态中

因此，我所做的是：


如果用户切换到任何
分发类型
，而不是
始终打开
，我将隐藏
网络攻击检测

现在出现了这样一个场景：用户切换到
始终打开
，而不是启用
网络攻击检测
，然后切换回不同的
分发类型
（这将消失
网络攻击检测
）。在这种情况下，
网络攻击检测
将弹出并启用..（因为它保存在状态中）

所以我现在做的是：


当将
分发类型
切换到任何其他
始终打开
时，它会将
网络攻击检测
状态更新为false

现在这是可行的，但是。。。我在表单中有大约20-30个字段和多个关系。所以现在有点乱了

你们觉得这里有什么更好的设计？（我想我要是能加一个就好了）

代码类似于：

_isNetWorkAttacksEnabled() {
    return this.state.distributionMethodValue == eDistributionMethod.ALWAYS_ON.value;
}

_onDistributionMethodChanged(value) {
    this.setState({ distributionMethodValue: value });

    if (value != eDistributionMethod.ALWAYS_ON.value) {
        this.setState({
            networkAttackDetections: false,
        });
    }
}

以及渲染：

<Row className="select-distribution-type">
    <RowTitle>
        <strong>Distribution Type</strong>
    </RowTitle>
    <RowContent>
        <SelectBox
            values={this.state.distributionTypes}
            selectedValue={this.state.distributionTypeValue}
            _onValueChanged={this._onDistributionTypeChanged}
        />
    </RowContent>
</Row>

{this._isNetWorkAttacksEnabled() &&
<Row className="network-attacks-detection">
    <RowTitle>
        <strong>Network Attack Detection</strong>
        <div>Enables network-based threat detection (available only in: “AlwaysOn” & “LightAgent” modes).</div>
    </RowTitle>
    <RowContent>
        <LabeledCheckBox
            value={this.state.networkAttackDetections}
            text="Enable Network Attack Detection"
            onClick={this._onNetAttDetClicked}
            dataAttr={"settings-sg-cb-network-attacks-detection"} />
    </RowContent>
</Row>}


分销类型
{this.\u isNetWorkAttacksEnabled（）&&
网络攻击检测
启用基于网络的威胁检测（仅在“AlwaysOn”和“LightAgent”模式下可用）。
}
请在问题中包含相关代码，而不是/作为文本中描述代码的补充。是否有存储所有表单状态的顶级组件？还是表单状态分布在所有组件上？@Lambros Symeonakis Top component