javascript - 如何使用react js在select中设置默认值

Question

在我的示例中，我有两个具有重置状态的 dropdown(select bank select state)。只有第一个下拉列表有数据。当我更改时第一个下拉值然后我获取状态数据并显示在下拉列表中。如果我选择 YES BANK 它会显示 select state再次使用银行而不是 yes bank 示例 Axis bank state dropdown show Delhi 为什么？它显示被重置并显示 select state ?

如何重置第二个下拉菜单(当第一个下拉菜单发生变化时)。这是我的代码

https://codesandbox.io/s/7wlwx2volq

当用户更改 bank name 时，第二个下拉列表始终显示 select state 以及 bank 的新数据

 onChangeDropdown = e => {
    console.log(e.target.value);
    this.props.callbackFn(e.target.value);
  };

请解释

Answer 1

一个可能的解决方案是:不在选项上使用 selected 属性，而是使用 controlled component意味着使用选择字段的值属性。每当银行列表发生任何变化时，重置状态选择字段值的值。还使用默认选项定义 value=''。

像这样:

<select value={this.props.value} onChange={this.onChangeDropdown}>
    <option value='' disabled>
        {this.props.defaultOption}
    </option>

    {makeDropDown()}
</select>;

从父组件传值，像这样:

<DropDown
    value={this.state.bankName}
    data={this.state.bankData}
    defaultOption="select Bank"
    callbackFn={this.callStateService}
/>
<DropDown
    value={this.state.stateName}
    data={this.state.stateData}
    defaultOption="select State"
    callbackFn={this.callDistrictService}
/>

定义状态选择字段变化的onChange函数:

callDistrictService = value => {
    this.setState({ stateName: value });
}

Working Sandbox.