Pregunta Evento OnChange utilizando React JS para desplegable


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

los onChange evento no funciona


74
2018-03-05 00:49


origen


Respuestas:


El evento de cambio se activa en el <select> elemento, no el <option> elemento. Sin embargo, ese no es el único problema. La forma en que definiste el change la función no causará una redención del componente. Parece que aún no has comprendido completamente el concepto de React, así que tal vez "Pensar en Reacción" ayuda

Debe almacenar el valor seleccionado como estado y actualizar el estado cuando cambie el valor. La actualización del estado activará la remisió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 <p> los elementos no tienen una value atributo. 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 de la <p> elemento simplemente ponerlo 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:


171
2018-03-05 00:57



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

23
2018-05-09 05:57