<label>
<select onChange={this.handleChange} className="select">
{
this.state.list.map( item =>{
return(
<option key={item.value} value={item.value} selected={this.state.value?this.state.value===item.label?true:false:false}>{item.label}</option>
)
})
}
</select>
</label>
//this.state.list 为数组对象 对象有value label 两个属性
//this.state.value是请求回来的值 根据这个值来判断显示哪一个option
以上代码 能正确显示效果但是会有一个报错为
Use the `defaultValue` or `value` props on <select> instead of setting `sele
意思是 select标签上要有defaultValue 以及value两个属性
如果您正在控制该值,则还应该设置值。如果没有,不要设置值,而是处理onChange事件以响应用户操作。
<label>
<select onChange={this.handleChange} className="select" defaultValue="" value={this.state.labels[this.state.value]}>
{
this.state.list.map( item =>{
return(
<option key={item.value} value={item.value}>{item.label}</option>
)
})
}
</select>
</label>
//this.state.list 为数组对象
//this.state.label为数组对象 储存的是this.state.list的value值
我们只需要把defaultValue设置为空 并且把value设置为循环数组对象的value值(索引值)即可
注意 :一定要注意类型 否则后期会出现超有意思的小bug