我<select>
从数组中做出反应。我的数组如下所示:
options: [
{"id":1,"name":"Option1"},
{"id":2,"name":"Option2"},
{"id":3,"name":"Option3"}
];
我map
在数组中找到所有选项,然后在中渲染选项map
。但是我可以从选择中选择任何选项,第一个除外。
这是我的选择:
<select
className="form-control"
name={this.props.name}
onChange={this.handleChange.bind(this)}>
{(Array.isArray(this.props.options) && this.props.options.length > 0) ? this.props.options.map(option => {
return (
<option key={option.id} value={option.id}>{option.name}</option>
)
}) : (<option>No Options Found</option>)}
</select>
我该如何做,才能同时选择第一个选项?我究竟做错了什么?
默认情况下,您的第一个选项处于选中状态。如果需要-您可以创建一个空选项,然后选择第一个选项。
render() {
const options = this.props.options.map(option =>
<option key={option.id} value={option.id}>{option.name}</option>
)
return (
<select
className="form-control"
name={this.props.name}
onChange={this.handleChange.bind(this)}
>
<option value="">Select option</option>
{options}
</select>
)
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句