reactjs - 如何在react js中设置下拉菜单的占位符？

Question

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

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

Use the defaultValue or value props on select instead of setting selected on 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 是一个 array，它通过 props 传递，映射到每个具有 object 的索引上我还通过数组中的 props 传递 key 。这里一切正常，它只是向我显示上面提到的警告。

如何删除它或者如何为 React 中的下拉菜单设置完美的占位符？

Answer 1

原因是，React使用 states 提供更好的控制元素的方法，所以不要使用 selected with 选项使用 select 的 value 属性并在 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>
       );
    }
}

How to set placeholder for dropdown?

根据Mozilla Dev Network , 占位符 不是 <select> 上的有效属性。因此，您也可以用它来渲染 default选项:

<option default>Select</option>

key 的使用按照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 dynamically在循环中，我们需要分配一个 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'/>

检查 fiddle 的工作示例:https://jsfiddle.net/29uk8fn0/