Как получить выбранное значение выпадающего меню в ReactJS

Ответ 1

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

<select value="Radish">
  <option value="Orange">Orange</option>
  <option value="Radish">Radish</option>
  <option value="Cherry">Cherry</option>
</select>

Итак, есть два решения для работы с элементами управления формами:

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

Пример:

var FruitSelector = React.createClass({
    getInitialState:function(){
      return {selectValue:'Radish'};
  },
    handleChange:function(e){
    this.setState({selectValue:e.target.value});
  },
  render: function() {
    var message='You selected '+this.state.selectValue;
    return (
      <div>
      <select 
        value={this.state.selectValue} 
        onChange={this.handleChange} 
      >
       <option value="Orange">Orange</option>
        <option value="Radish">Radish</option>
        <option value="Cherry">Cherry</option>
      </select>
      <p>{message}</p>
      </div>        
    );
  }
});

React.render(<FruitSelector name="World" />, document.body);

JSFiddle: http://jsfiddle.net/xe5ypghv/

2. Неконтролируемые компоненты. Другой вариант - не контролировать значение и просто отвечать на события onChange. В этом случае вы можете использовать defaultValue prop для установки начального значения.

   <div>
    <select defaultValue={this.state.selectValue} 
    onChange={this.handleChange} 
    >
       <option value="Orange">Orange</option>
       <option value="Radish">Radish</option>
       <option value="Cherry">Cherry</option>
     </select>
     <p>{message}</p>
     </div>       
   

http://jsfiddle.net/kb3gN/10396/

Документы для этого замечательные: http://facebook.github.io/react/docs/forms.html а также показать, как работать с несколькими вариантами выбора.

UPDATE

Вариант Варианта 1 (с использованием контролируемого компонента) заключается в использовании Redux и React-Redux создать контейнерный компонент . Это включает в себя функцию connect и a mapStateToProps, которая проще, чем кажется, но, вероятно, излишняя, если вы только начинаете.

Ответ 2

Внедрите свое раскрывающееся меню как

<select id = "dropdown" ref = {(input)=> this.menu = input}>
    <option value="N/A">N/A</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

Теперь, чтобы получить выбранное значение параметра выпадающего меню, просто используйте:

let res = this.menu.value;

Ответ 3

Просто используйте onChange событие объекта <select>. Выбранное значение находится в e.target.value, затем.

Кстати, использовать id="..." плохую практику. Лучше использовать ref=">.." http://facebook.github.io/react/docs/more-about-refs.html