我有一个带有5个选项的html select下拉列表（汽车制造商列表），在这里用户单击一个选项，onchangeHandler将获得选定的值。根据选择的值，将向用户显示另一个下拉列表（汽车型号列表）。而且效果很好。
但是，如果我在汽车制造商列表中只有一个选项，则需要在carManufacturer下拉列表中将其显示为预选（我能够做到），并自动显示其各自的{{1} }下拉菜单，但我无法做到。
下面的代码在选择特定的carModels时会打开carModels下拉菜单
carManufacturer我的问题是，如果我必须在public carMfgSelected(event: any) {
const carMfg = event.nativeEvent.target.value;
this.setState({carMfgselected: carMfg});
}
render(){
<div>
<span>Select car manufacturer : </span>
<select id="carMfgSelection" onChange={this.carMfgSelected} value={this.carMfgList.length === 1 ? this.carMfgList[0].mfgName : ''}>
<option value="">select</option>
{...looping through carMfgList}
</select>
</div>
{this.state.carMfgselected ?
<div>
<span>Select car model : </span>
<select id="carModelSelection" onChange={this.carModelSelected}>
<option value="audi">Audi</option>
<option value="merc">Merc</option>
<option value="bmw">BMW</option>
</select>
</div> : <></>}
}
数组中只有一个选项的情况下必须将我的第一个下拉菜单显示为预选状态，如何在点击处理程序中触发event.nativeEvent.target.value？
答案 0 :(得分：0)
希望您的选项不会像这样硬编码。
您需要检查进入的选项的长度，然后调用处理程序。
render(){
this.props.carModelOptions.length == 1 ? this.carMfgSelected(this.props.carModelOptions[0]) : null;
return {...}
}