选择下拉菜单中的 DefaultValue 和更改值答案

【问题标题】：DefaultValue and changing values in select dropdown选择下拉菜单中的 DefaultValue 和更改值
【发布时间】：2020-04-28 04:02:35
【问题描述】：

在我的反应应用程序中，我有一个返回用户详细信息的端点和另一个返回国家/地区的端点，我在componentDidMount 中调用它们，我有一个国家下拉列表，它的默认值/选项应该是国家从用户详细信息端点返回，它的选项应该是从国家端点返回的国家列表，问题是当我使用 value 属性设置选择的默认值时，它始终为 null 并且不显示值，所以我尝试使用<option selected="selected">{this.state.country}</option>，但是当我使用它时 onChange 函数不起作用，那么实现它的最佳方法是什么，这里是代码：

使用值属性：

<select value={this.state.country} onChange={this.handleChange}>{this.renderCountries()}</select>

使用选定的选项：

<select onChange={this.handleChange}>
  <option selected="selected">{this.state.country}</option>
    {this.renderCountries()}
</select>

OnChange 函数：

handleChange = event => { 
    this.setState({ selectedOption: event.target.value });
};

渲染选项：

 renderCountries() {
   return this.state.countries.map(country => (
     <option key={country.id} value={country.id}>
       {country.name}
     </option>
    ));
 }

【问题讨论】：

标签： javascript reactjs forms select onchange

【解决方案1】：

将this.state.country 设置为端点返回的值。

<select value={this.state.country} onChange={this.handleChange}> . 
    {this.renderCountries()}
</select>

handleChange 需要为country 而不是selectedOption 设置状态。这是因为 select 上的 value 属性是 this.state.country

  handleChange = event => {
    this.setState({ country: event.target.value });
  };

  renderCountries = () => {
    return this.state.countries.map(country => (
      <option key={country.id} value={country.id}>
        {country.name}
      </option>
    ));
  };

希望这能解决您的问题。

【讨论】：