我正在呼叫我將其放在下拉串列中的API輸出。API
這些country code在我的下拉串列中。我想將默認訊息放入drop down like. 用戶點擊“請選擇國家代碼”，然后他可以選擇國家代碼。這里默認選擇 EF。代替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
uj5u.com熱心網友回復：
要為<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/414877.html
標籤：