javascript - handlesubmit - React.js: identificación de diferentes entradas con un controlador onChange

react select onchange

Question

Curioso cuál es la forma correcta de abordar esto es:

var Hello = React.createClass({
getInitialState: function() {
    return {total: 0, input1:0, input2:0};
},
render: function() {
    return (
        <div>{this.state.total}<br/>
            <input type="text" value={this.state.input1} onChange={this.handleChange} />
            <input type="text" value={this.state.input2} onChange={this.handleChange} />
        </div>
    );
},
handleChange: function(e){
    this.setState({ ??? : e.target.value});
    t = this.state.input1 + this.state.input2;
    this.setState({total: t});
}
});

React.renderComponent(<Hello />, document.getElementById(''content''));

Obviamente, podría crear funciones separadas de cambio de mango para manejar cada entrada diferente, pero eso no es muy agradable. Del mismo modo, podría crear un componente solo para una entrada individual, pero quería ver si hay una manera de hacerlo así.

Answer 1

Solución obsoleta

valueLink/checkedLink están en deprecated del núcleo de React, porque confunde a algunos usuarios. Esta respuesta no funcionará si usa una versión reciente de React. Pero si te gusta, puedes emularlo fácilmente creando tu propio componente de Input

Contenido de respuesta anterior:

Lo que desea lograr se puede lograr mucho más fácilmente utilizando los ayudantes de enlace de datos bidireccionales de React.

var Hello = React.createClass({
    mixins: [React.addons.LinkedStateMixin],
    getInitialState: function() {
        return {input1: 0, input2: 0};
    },

    render: function() {
        var total = this.state.input1 + this.state.input2;
        return (
            <div>{total}<br/>
                <input type="text" valueLink={this.linkState(''input1'')} />;
                <input type="text" valueLink={this.linkState(''input2'')} />;
            </div>
        );
    }

});

React.renderComponent(<Hello />, document.getElementById(''content''));

Fácil, ¿verdad?

http://facebook.github.io/react/docs/two-way-binding-helpers.html

Incluso puedes implementar tu propio mixin

Answer 2

@Vigril Disgr4ce

Cuando se trata de formularios de campo múltiple, tiene sentido usar la característica clave de React: componentes.

En mis proyectos, creo componentes TextField, que toman un valor prop como mínimo, y se ocupa de manejar comportamientos comunes de un campo de texto de entrada. De esta manera, no tiene que preocuparse por mantener un registro de los nombres de los campos al actualizar el estado del valor.

[...]

handleChange: function(event) {
  this.setState({value: event.target.value});
},
render: function() {
  var value = this.state.value;
  return <input type="text" value={value} onChange={this.handleChange} />;
}

[...]

Answer 3

El evento onChange burbujea ... Entonces puedes hacer algo como esto:

// A sample form
render () {
  <form onChange={setField}>
    <input name="input1" />
    <input name="input2" />
  </form>
}

Y su método setField podría verse así (suponiendo que esté utilizando ES2015 o posterior:

setField (e) {
  this.setState({[e.target.name]: e.target.value})
}

Utilizo algo similar a esto en varias aplicaciones, y es bastante útil.

Answer 4

Hola, he mejorado la respuesta ssorallen . No es necesario enlazar la función porque puede acceder a la entrada sin ella.

var Hello = React.createClass({
    render: function() {
        var total = this.state.input1 + this.state.input2;
        return (
             <div>{total}<br/>
                  <input type="text" 
                    value={this.state.input1}
                    id="input1"  
                    onChange={this.handleChange} />
                 <input type="text" 
                    value={this.state.input2}
                    id="input2" 
                    onChange={this.handleChange} />
            </div>
       );
   },
   handleChange: function (name, value) {
       var change = {};
       change[name] = value;
       this.setState(change);
   }
});

React.renderComponent(<Hello />, document.getElementById(''content''));

Answer 5

Puede rastrear el valor de cada input niño creando un componente de InputField separado que gestiona el valor de una sola input . Por ejemplo, InputField podría ser:

var InputField = React.createClass({
  getInitialState: function () {
    return({text: this.props.text})
  },
  onChangeHandler: function (event) {
     this.setState({text: event.target.value})
  }, 
  render: function () {
    return (<input onChange={this.onChangeHandler} value={this.state.text} />)
  }
})

Ahora el valor de cada input se puede rastrear dentro de una instancia separada de este componente InputField sin crear valores separados en el estado del padre para monitorear cada componente secundario.

Answer 6

Puede usar el método .bind para .bind los parámetros en el método handleChange . Sería algo así como:

  var Hello = React.createClass({
    getInitialState: function() {
        return {input1:0, 
                input2:0};
    },
    render: function() {
      var total = this.state.input1 + this.state.input2;
      return (
        <div>{total}<br/>
          <input type="text" value={this.state.input1} 
                             onChange={this.handleChange.bind(this, ''input1'')} />
          <input type="text" value={this.state.input2} 
                             onChange={this.handleChange.bind(this, ''input2'')} />
        </div>
      );
    },
    handleChange: function (name, e) {
      var change = {};
      change[name] = e.target.value;
      this.setState(change);
    }
  });

  React.renderComponent(<Hello />, document.getElementById(''content''));

(También hice que el total se compute en el momento del renderizado, ya que es lo que se recomienda hacer).

Answer 7

Puede usar un atributo de React especial llamado ref y luego hacer coincidir los nodos DOM reales en el evento onChange usando la función getDOMNode() React :

handleClick: function(event) {
  if (event.target === this.refs.prev.getDOMNode()) {
    ...
  }
}

render: function() {
  ...
  <button ref="prev" onClick={this.handleClick}>Previous question</button>
  <button ref="next" onClick={this.handleClick}>Next question</button>
  ...
}

Answer 8

Sugiero apegarse a los atributos HTML estándar, como el name en input elementos de input para identificar sus entradas. Además, no necesita mantener "total" como un valor separado en estado porque es composable agregando otros valores en su estado:

var Hello = React.createClass({
    getInitialState: function() {
        return {input1: 0, input2: 0};
    },
    render: function() {
        const total = this.state.input1 + this.state.input2;

        return (
            <div>{total}<br/>
                <input type="text" value={this.state.input1} name="input1" onChange={this.handleChange} />
                <input type="text" value={this.state.input2} name="input2" onChange={this.handleChange} />
            </div>
        );
    },
    handleChange: function(e) {
        this.setState({[e.target.name]: e.target.value});
    }
});

React.renderComponent(<Hello />, document.getElementById(''content''));

Answer 9

También puedes hacerlo así:

...
constructor() {
    super();
    this.state = { input1: 0, input2: 0 };
    this.handleChange = this.handleChange.bind(this);
}

handleChange(input, value) {
    this.setState({
        input: value
    })
}

render() {
    const total = this.state.input1 + this.state.input2;
    return (
        <div>
            {total}<br />
            <input type="text" onChange={e => this.handleChange(''input1'', e.target.value)} />
            <input type="text" onChange={e => this.handleChange(''input2'', e.target.value)} />
        </div>
    )
}