将消息放入反应的下拉列表中

Question

我正在调用 API 并输出 API 我正在下拉列表中。

这些是我下拉列表中的 country code。我想将默认消息放入 drop down like。 “请 select 国家代码”一旦用户点击，他就可以 select 国家代码。这里默认 EF 是 selected。代替 EF 我想放置消息。

下面output我放list.

 componentDidMount() {
    axios.get(`http://localhost:8080/country_code`).then((res) => {
      const countryData = res.data;
      this.setState({ countryData });
      alert(countryData);
    });
  }

dropdown代码

 <select
            name="countriesValue"
            value={this.state.countriesValue}
            onChange={this.selectCountryCode}
          >
            {this.state.countryData.map((countryData) => (
              <option key={countryData} value={countryData}>
                {countryData}
              </option>
            ))}
          </select>

方法：-

  selectCountryCode(e) {
    e.preventDefault();
    this.setState({ countriesValue: e.target.value });
  }

state变量

this.state = {
      countryCode: '',
      countryData: [],
      countriesValue: '',
    };

我在 select

中犯了什么错误

编辑1：-

<select
            name="countriesValue"
            value={this.state.countriesValue}
            onChange={this.selectCountryCode}
          >
            <option value="" selected disabled hidden>
              Please select the country code
            </option>
            {this.state.countryData.map((countryData) => (
              <option key={countryData} value={countryData}>
                {countryData}
              </option>
            ))}

          </select>

包含此行后

<option value="" selected disabled hidden>
              Please select the country code </option>

一旦用户 select 下拉列表此 Please select the country code 不会再次出现

Answer 1

要向 <select> 元素添加默认值，您可以添加禁用和隐藏选项，如下所示：

<select
 name="countriesValue"
 value={this.state.countriesValue}
 onChange={this.selectCountryCode}
>
 <option value="" selected disabled hidden>Please select the country code</option>
 {this.state.countryData.map((countryData) => (
   <option key={countryData} value={countryData}>
     {countryData}
   </option>
 ))}
</select>

将消息放入反应的下拉列表中

putting message in dropdownlist in react

javascript

reactjs

react-native

react-redux

dropdown