Jak uzyskać wybraną wartość z rozwijanego menu w ReactJS

Używam Reacta i chcę uzyskać wartość wybranej opcji listy rozwijanej w reaccie, ale nie wiem jak. Jakieś sugestie? dzięki! Moja lista rozwijana to po prostu select like: 

            <select id = "dropdown">
                <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>
Author: BlueElixir, 2015-03-17
Source

3 answers

Kod w metodzie render reprezentuje komponent w danym momencie. Jeśli wykonasz coś takiego , użytkownik nie będzie mógł dokonywać selekcji za pomocą kontrolki formularza: 

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

Istnieją więc dwa rozwiązania do pracy ze sterownikami formularzy:

  1. Komponenty kontrolowane użyj komponentu state, aby odzwierciedlić wybory użytkownika. Zapewnia to największą kontrolę, ponieważ wszelkie zmiany wprowadzone w state będą odzwierciedlone w renderowaniu komponentu:

Przykład: 

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/

  1. Niekontrolowane Komponenty inną opcją jest nie kontrolowanie wartości i po prostu reagowanie na zdarzenia onChange. W tym przypadku możesz użyć właściwości defaultValue, aby ustawić wartość początkową.

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

Dokumenty do tego są świetne: http://facebook.github.io/react/docs/forms.html a także pokaż, jak pracować z wieloma selekcjami.

UPDATE

Wariantem opcji 1 (używając kontrolowanego komponentu) jest użycie Redux i React-Redux do utworzenia komponentu kontenera. Dotyczy to Funkcji connect i mapStateToProps, która jest łatwiejsza niż się wydaje, ale prawdopodobnie przesada, jeśli dopiero zaczynasz.

 52
Author: Max Heiber,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-09 15:31:46

Zaimplementuj listę rozwijaną jako 

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

Teraz, Aby uzyskać wartość wybranej opcji z rozwijanego menu wystarczy użyć:

let res = this.menu.value;
 12
Author: Shubham Khatri,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-07 19:50:51

Wystarczy użyć onChange zdarzenia <select> obiektu. Wybrana wartość jest w e.target.value wtedy.

Przy okazji, używanie id="..." jest złą praktyką. Lepiej używać ref=">.." http://facebook.github.io/react/docs/more-about-refs.html

 6
Author: Karén,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-17 21:10:34