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

Question

dropdown在我的示例中我有两个重置状态(select bank select state).只有第一个下拉列表有数据.当我更改第一个下拉值时,我获取状态数据并显示在下拉列表中.如果我选择YES BANK它显示我select state.现在如果我选择任何状态示例.然后Delhi做某事.但是现在如果我再次更改银行而不是yes bank示例Axis bank状态下拉列表显示Delhi为什么？它显示重置并显示select state？

如何重置第二个下拉列表(第一个下拉列表更改时).我的代码是

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

当用户更改时,第二个下拉列表始终显示select state新数据bankbank name

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

请解释

Answer 1

一种可能的解决方案是：使用受控组件意味着使用选择字段的值属性，而不是在选项上使用选定的属性。每当银行列表发生任何变化时，重置状态选择字段值的值。还定义value=''with default 选项。

像这样：

<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 });
}

工作沙箱。