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

Posted 2021-04-18

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

如何重置第二个下拉列表（第一个下拉列表更改时）。我的代码是

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

当用户更改select state时，第二次下拉总是向bank显示bank name的新数据

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

请解释

答案

一种可能的解决方案是：使用controlled component表示使用select字段的value属性，而不是在选项上使用selected属性。每当银行列表发生任何变化时，重置状态选择归档值的值。还可以使用默认选项定义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.