javascript - inputs - Evento OnChange usando React JS para desplegable

react-select

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

El evento onChange no funciona.

Answer 1

El evento de cambio se activa 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 devolución del componente. Parece que todavía no has entendido completamente el concepto de React, por lo que tal vez "Pensar en reaccionar" ayude.

Debe almacenar el valor seleccionado como estado y actualizar el estado cuando cambie el valor. La actualización del estado desencadenará una devolució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, los controles de estado y formulario:

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

Answer 2

Ganchos de reacción (16.8+):

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.bind(this)} 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); 

Answer 3

Gracias Felix Kling, pero su respuesta necesita un pequeño cambio:

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

Answer 4

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