如何在反應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/