El evento de cambio se desencadena en el elemento <select> , no en el elemento <option> . Sin embargo, ese no es el único problema. La forma en que definió la función de change no provocará una nueva representación del componente. Parece que es posible que aún no hayas comprendido completamente el concepto de React, por lo que tal vez "Pensar en React" te ayude.

Debe almacenar el valor seleccionado como estado y actualizar el estado cuando cambie el valor. Actualizar el estado activará una nueva representación 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);

También tenga en cuenta que los elementos <p> no tienen un atributo de value . React/JSX simplemente replica la conocida sintaxis HTML, no introduce atributos personalizados (con la excepción de key y ref ). Si desea que el valor seleccionado sea el contenido del elemento <p> , simplemente colóquelo dentro, como lo haría con cualquier contenido estático.

Obtenga más información sobre el manejo de eventos, el estado y los controles de formulario:

• http://facebook.github.io/react/docs/interactividad-y-dinamica-uis.html
• http://facebook.github.io/react/docs/forms.html

Ganchos de reacción (16.8+):

 const Dropdown = ({ options }) => { const [selectedOption, setSelectedOption] = useState(options[0].value); return ( <select value={selectedOption} onChange={e => setSelectedOption(e.target.value)}> {options.map(o => ( <option key={o.value} value={o.value}>{o.label}</option> ))} </select> ); };

import React, { PureComponent, Fragment } from 'react'; import ReactDOM from 'react-dom'; class Select extends PureComponent { state = { options: [ { name: 'Select…', value: null, }, { name: 'A', value: 'a', }, { name: 'B', value: 'b', }, { name: 'C', value: 'c', }, ], value: '?', }; handleChange = (event) => { this.setState({ value: event.target.value }); }; render() { const { options, value } = this.state; return ( <Fragment> <select onChange={this.handleChange} value={value}> {options.map(item => ( <option key={item.value} value={item.value}> {item.name} </option> ))} </select> <h1>Favorite letter: {value}</h1> </Fragment> ); } } ReactDOM.render(<Select />, window.document.body);