Как установить заполнитель для выпадающего списка в react js?

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

я добавил дополнительную опцию с отключенным свойством, но это дает мне следующее предупреждение:

использовать defaultValue или value реквизит на select вместо настройки selected on вариант.

<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?

6
react-redux reactjs

1 ответов

причина React обеспечивает лучший способ управления элементом с помощью states, вместо того, чтобы использовать selected с опцией используйте свойство 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, местозаполнитель не является допустимым атрибут <select>. Так что вместо этого вы можете это также сделать :

<option default>Select</option>

использование ключа по состоянию на DOC:

ключи помогают реагировать определить, какие элементы были изменены, добавлены, или удаленный. Ключи должны быть даны элементам внутри массива, чтобы дать элементы стабильная идентичность.

предложение:

всякий раз, когда мы создаем любые 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'/>

Проверьте скрипку для рабочего примера:https://jsfiddle.net/29uk8fn0/

12