Curioso, qual é a maneira correta de abordar isso:

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, você pode criar funções handleChange separadas para lidar com cada entrada diferente, mas isso não é muito bom. Da mesma forma, você pode criar um componente apenas para uma entrada individual, mas eu queria ver se há uma maneira de fazer isso assim.

Sugiro aderir a atributos HTML padrão, como nameno inputElements, para identificar suas entradas. Além disso, você não precisa manter "total" como um valor separado no estado, pois é possível compor adicionando outros valores ao seu 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'));

Você pode usar o .bindmétodo para criar previamente os parâmetros para o handleChangemétodo. Seria algo 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'));

(Também fiz com que totalfosse computado no momento da renderização, pois é a coisa recomendada a fazer.)

O onChangeevento borbulha ... Então você pode fazer algo assim:

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

E seu método setField pode ficar assim (supondo que você esteja usando o ES2015 ou posterior:

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

Eu uso algo semelhante a isso em vários aplicativos, e é bastante útil.

Solução preterida

valueLink/checkedLinkforam descontinuados do núcleo React, porque está confundindo alguns usuários. Esta resposta não funcionará se você usar uma versão recente do React. Mas se você gosta, pode emular facilmente criando seu próprio Inputcomponente

Conteúdo antigo da resposta:

O que você deseja alcançar pode ser muito mais facilmente alcançado usando os auxiliares de ligação de dados bidirecionais do 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 né?

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

Você pode até implementar seu próprio mixin

Você também pode fazer assim:

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

Você pode usar um Reactatributo especial chamado refe, em seguida, combinar os nós DOM reais no onChangeevento usando Reacta getDOMNode()função 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

Quando se trata de formulários de vários campos, faz sentido usar o recurso principal do React: componentes.

Nos meus projetos, crio componentes TextField, que assumem um valor mínimo e cuidam de lidar com comportamentos comuns de um campo de texto de entrada. Dessa forma, você não precisa se preocupar em acompanhar os nomes dos campos ao atualizar o estado do 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} />;
}

[...]

Você pode acompanhar o valor de cada filho input, criando um InputFieldcomponente separado que gerencia o valor de um único input. Por exemplo, InputFieldpoderia 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} />)
  }
})

Agora, o valor de cada um inputpode ser rastreado em uma instância separada desse InputFieldcomponente sem criar valores separados no estado do pai para monitorar cada componente filho.

Vou fornecer uma solução realmente simples para o problema. Suponha que tenhamos duas entradas usernameepassword , mas queremos que nosso identificador seja fácil e genérico, para podermos reutilizá-lo e não escrever código padrão.

I.Our formulário:

                <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.O nosso construtor, que queremos salvar usernamee password, para que possamos acessá-los facilmente:

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

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

III.O identificador interessante e "genérico", com apenas um onChangeevento, é baseado nisso:

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

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


    event.preventDefault();
}

Deixe-me explicar:

1. Quando uma alteração é detectada, onChange(event)é chamada

2.Em seguida, obtemos o parâmetro name do campo e seu valor:

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

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

3.Com base no parâmetro name, obtemos nosso valor do estado no construtor e atualizamos com o valor:

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

4.A chave a ser observada aqui é que o nome do campo deve corresponder ao nosso parâmetro no estado

Espero ter ajudado alguém de alguma forma :)

A chave do seu estado deve ser igual ao nome do seu campo de entrada. Então você pode fazer isso no método handleEvent;

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

Oi melhoramos resposta ssorallen . Você não precisa vincular a função porque pode acessar a entrada sem ela.

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