如何在反应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是作为props到其上具有object每个索引被映射和我通过密钥作为道具太这是在阵列被传递的array。一切都在这里工作，它只是告诉我上面提到的警告。

如何删除或如何设置下拉反应的完美占位符？

Answer 1

原因是，React提供通过使用states控制元件的一个更好的方式，因此代替使用selected与选项使用的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 Dev Network，占位是不是在<select>有效的属性。因此，在地方，你可以，你这也呈现一个default选项：

<option default>Select</option>

使用的关键按DOC：

键帮助阵营识别哪些项目已经改变，是补充，或者删除了 。应该给数组内的元素赋予数组元素一个稳定的标识。

建议：

每当我们创建任何uidynamically在循环中，我们需要分配一个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/