如何为反应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,它也在数组中.一切都在这里工作,它只是向我展示了我上面提到的警告.

如何删除或如何为下拉列表设置完美的占位符？

Answer 1

原因是,React通过使用提供更好的方法来控制元素states,因此不使用selectedwith选项使用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 Dev Network,占位符不是a的有效属性<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/