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

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 de handleChange separadas para manejar cada entrada diferente, pero eso no es muy bueno. Del mismo modo, podría crear un componente solo para una entrada individual, pero quería ver si hay una manera de hacerlo así.

Sugiero apegarse a los atributos HTML estándar como nameen inputElements para identificar sus entradas. Además, no necesita mantener "total" como un valor separado en el estado porque es componible 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'));

Puede usar el .bindmétodo para precompilar los parámetros del handleChangemétodo. 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 totalse calcule en el momento del renderizado, ya que es lo más recomendable).

El onChangeevento 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é usando 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.

Solución obsoleta

valueLink/checkedLinkestán en desuso del núcleo 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 Inputcomponente

Viejo contenido de respuesta:

Lo que desea lograr puede lograrse mucho más fácilmente con 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

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

Puede usar un Reactatributo especial llamado refy luego hacer coincidir los nodos DOM reales en el onChangeevento utilizando Reactla getDOMNode()función de:

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>
  ...
}

@Vigril Disgr4ce

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

En mis proyectos, creo componentes TextField, que toman un valor de apoyo como mínimo, y se encarga de manejar los comportamientos comunes de un campo de texto de entrada. De esta forma, no tiene que preocuparse por realizar un seguimiento de los nombres de campo 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} />;
}

[...]

Puede realizar un seguimiento del valor de cada hijo inputcreando un InputFieldcomponente separado que gestione el valor de un solo input. Por ejemplo, el InputFieldpodrí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 inputse puede rastrear el valor de cada uno dentro de una instancia separada de este InputFieldcomponente sin crear valores separados en el estado primario para monitorear cada componente secundario.

Proporcionaré una solución realmente simple al problema. Supongamos que tenemos dos entradas usernamey password, pero queremos que nuestro identificador sea fácil y genérico, para poder reutilizarlo y no escribir código repetitivo.

I. Nuestra forma:

                <form>
                    <input type="text" name = "username" onChange={this.onChange} value={this.state.username}/>
                    <input type="text" name = "password" onChange={this.onChange} value={this.state.password}/>
                    <br></br>
                    <button type="submit">Submit</button>
                </form>

II.Nuestro constructor, del que queremos guardar nuestro usernamey password, para que podamos acceder a ellos fácilmente:

constructor(props) {
    super(props);
    this.state = {
        username: '',
        password: ''
    };

    this.onSubmit = this.onSubmit.bind(this);
    this.onChange = this.onChange.bind(this);
}

III. El manejo interesante y "genérico" con un solo onChangeevento se basa en esto:

onChange(event) {
    let inputName = event.target.name;
    let value = event.target.value;

    this.setState({[inputName]:value});


    event.preventDefault();
}

Dejame explicar:

1.Cuando se detecta un cambio, onChange(event)se llama

2. Luego obtenemos el parámetro de nombre del campo y su valor:

let inputName = event.target.name; ex: username

let value = event.target.value; ex: itsgosho

3. De acuerdo con el parámetro de nombre, obtenemos nuestro valor del estado en el constructor y lo actualizamos con el valor:

this.state['username'] = 'itsgosho'

4.La clave a tener en cuenta aquí es que el nombre del campo debe coincidir con nuestro parámetro en el estado

Espero haber ayudado a alguien de alguna manera :)

La clave de su estado debe ser la misma que el nombre de su campo de entrada. Entonces puede hacer esto en el método handleEvent;

this.setState({
        [event.target.name]: event.target.value
});

Hola, he mejorado la respuesta ssorallen . No necesita vincular 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'));