<select>
<option selected disabled>Select</option
Use the
defaultValueorvalueprops on select instead of setting
selectedon option.
<select>
{this.props.optionarray.map(function(e){
return <option
value={e[self.props.unique]}
key={e[self.props.unique]}
>
{e[self.props.name]}
</option>
})}
</select>
optionarray是一个数组,它通过道具传递,映射到每个有一个对象的索引上,我也通过道具传递密钥,它也在数组中.一切都在这里工作,它只是向我展示了我上面提到的警告.
如何删除或如何为下拉列表设置完美的占位符？
解决方法
原因是,React通过使用状态提供了一种更好的控制元素的方法,所以不使用select with option使用select的value属性并在state变量中定义它的值,使用onChange方法更新状态,使用它这条路：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '1'
};
}
render(){
return(
<select value={this.state.value} onChange={(e)=>{this.setState({value: e.target.value})}}>
<option value='1' disabled>Select</option>
{
[2,3,4].map((i,j)=>{
return <option key={i} value={i}>{i}</option>
})
}
</select>
);
}
}
How to set placeholder for dropdown?
根据Mozilla Dev Network,占位符不是< select>的有效属性.因此,您也可以使用它来呈现默认选项：
< option default>选择< / option>
按照DOC使用密钥：
Keys help React identify which items have changed,are added,or are
removed. Keys should be given to the elements inside the array to give
the elements a stable identity.
建议：
每当我们在循环中动态创建任何ui时,我们需要为每个元素分配一个唯一的键,以便反应可以轻松识别元素,它主要用于提高性能.
检查工作示例：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '1'
};
}
render(){
return(
<select value={this.state.value} onChange={(e)=>{this.setState({value: e.target.value})}}>
<option value='1' disabled>Select</option>
{
[2,j)=>{
return <option key={i} value={i}>{i}</option>
})
}
</select>
);
}
}
ReactDOM.render(<App />,document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='container'/>
检查小提琴的工作示例：https://jsfiddle.net/29uk8fn0/
