Question

我的示例中有两个dropdown具有重置状态（select bank select state）。只有第一个下拉列表有数据。当我更改第一个下拉值时，我获取状态数据并显示在落下。如果我选择YES BANK，则会显示select state。如果我选择任何状态示例Delhi。然后执行某些操作。但是现在如果我再次更改bank而不是yes bank示例{ {1}}状态下拉列表显示Axis bank为什么？它会显示重置并显示Delhi？

如何重置第二个下拉列表（当第一个下拉列表发生变化时）。这是我的代码

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

当用户更改select state

时，第二个下拉列表始终显示select state新数据bank

bank name

请解释

Answer 1

一种可能的解决方案是：使用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.

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

1 个答案: