Evento OnChange utilizzando React JS per il menu a discesa

Question

var MySelect = React.createClass({ 
    change: function(){ 
     return document.querySelector('#lang').value; 
    }, 
    render: function(){ 
     return(
      <div> 
       <select id="lang"> 
        <option value="select" onChange={this.change}>Select</option> 
        <option value="Java" onChange={this.change}>Java</option> 
        <option value="C++" onChange={this.change}>C++</option> 
       </select> 
       <p></p> 
       <p value={this.change}></p> 
      </div> 
     ); 
    } 
}); 

React.render(<MySelect />, document.body); 

L'evento onChange non funziona.

Answer 1

L'evento di modifica viene attivato sull'elemento <select>, non sull'elemento <option>. Tuttavia, questo non è l'unico problema. Il modo in cui è stata definita la funzione change non causerà un rerender del componente. Sembra che tu non abbia ancora pienamente compreso il concetto di React, quindi forse gli aiuti "Thinking in React".

È necessario memorizzare il valore selezionato come stato e aggiornare lo stato quando il valore cambia. L'aggiornamento dello stato attiverà un rerender del componente.

var MySelect = React.createClass({ 
    getInitialState: function() { 
     return { 
      value: 'select' 
     } 
    }, 
    change: function(event){ 
     this.setState({value: event.target.value}); 
    }, 
    render: function(){ 
     return(
      <div> 
       <select id="lang" onChange={this.change} value={this.state.value}> 
        <option value="select">Select</option> 
        <option value="Java">Java</option> 
        <option value="C++">C++</option> 
       </select> 
       <p></p> 
       <p>{this.state.value}</p> 
      </div> 
     ); 
    } 
}); 

React.render(<MySelect />, document.body); 

Si noti inoltre che <p> elementi non hanno un attributo value. React/JSX replica semplicemente la nota sintassi HTML, non introduce attributi personalizzati (ad eccezione di key e ref). Se si desidera che il valore selezionato sia il contenuto dell'elemento <p>, inserirlo semplicemente all'interno, come si farebbe con qualsiasi contenuto statico.

Per saperne di più sui controlli di gestione degli eventi, statali e forma:

• http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html
• http://facebook.github.io/react/docs/forms.html

Answer 2

alternativo

// adheres to airbnb syntax 
import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 

class Select extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     value: '?', 
     options: [ 
     { 
      name: 'Select…', 
      value: null, 
     }, 
     { 
      name: 'A', 
      value: 'a', 
     }, 
     { 
      name: 'B', 
      value: 'b', 
     }, 
     { 
      name: 'C', 
      value: 'c', 
     }, 
     ], 
    }; 
    } 
    render() { 
    const createItem = (item, key) => 
     <option 
     key={key} 
     value={item.value} 
     > 
     {item.name} 
     </option>; 
    return (
     <div> 
     <select 
      onChange={event => this.setState({ value: event.target.value })} 
      value={this.state.value} 
     > 
      {this.state.options.map(createItem)} 
     </select> 
     <h1>Favorite letter: {this.state.value}</h1> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<Select />, document.body);