如何使用 React js 在选择中设置默认值答案

【问题标题】：how to set default value in select using react js如何使用 React js 在选择中设置默认值
【发布时间】：2018-08-09 02:51:56
【问题描述】：

在我的示例中，我有两个dropdown 具有重置状态（select bankselect state）。只有第一个下拉列表有数据。当我更改第一个下拉列表值时，我获取状态数据并显示在下拉列表中。如果我选择YES BANK，它会显示select state。现在如果我选择任何状态示例Delhi。然后做一些事情。但是现在如果我再次更改银行而不是yes bank 示例Axis bank 状态下拉显示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);
  };

请解释

【问题讨论】：

我可以建议您重写您的问题，并尝试更清楚问题是什么以及您要做什么。我意识到您想在单击第二个下拉菜单时重置下拉菜单，但整个解释很难理解。另请显示您的其余代码。

标签： javascript reactjs react-router react-redux

【解决方案1】：

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

【讨论】：