如何在React JS中为下拉菜单设置占位符？

Question

<select>
     <option selected disabled>Select</option

我添加了一个带有禁用属性的额外选项，但这给了我以下警告：

在选择上使用defaultValue或value道具，而不是selected在选项上设置 。

<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是array传递props给要映射到具有的每个索引的索引，object并且我也传递props了数组中的键。一切都在这里工作，只是向我展示了我上面提到的警告。

我该如何删除它或如何设置一个完美的占位符以使react下降？

Answer 1

原因是，通过React提供了一种更好的方法来控制元素states，因此，selected与其使用with选项，不使用选项的value属性select并在state变量中定义其值，而是使用onChange方法来更新state，以这种方式使用它：

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>
       );
    }
}

如何设置下拉菜单的占位符？

根据Mozilla开发人员网络， 占位符
不是上的有效属性<select>。因此，您可以代替它来呈现一个default选项：

<option default>Select</option>

*根据 DOC *使用密钥 ：

按键可帮助React识别哪些项目已更改，添加或删除。应该为数组内的元素提供键，以赋予元素稳定的身份。

建议：

每当我们创建任何ui
dynamicallyin循环时，我们都需要为unique每个循环分配一个键element，以便react可以轻松识别该元素，它基本上是用来改善的performance。

检查工作示例：

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>

   );

}

}



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/