Buna yaklaşmanın doğru yolunun ne olduğunu merak ediyorum:

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

Açıkçası, her farklı girişi işlemek için ayrı tutamak değiştirme işlevleri oluşturabilirsiniz, ancak bu çok hoş değil. Benzer şekilde, sadece bireysel bir giriş için bir bileşen oluşturabilirsiniz, ancak bunu böyle yapmanın bir yolu olup olmadığını görmek istedim.

Gibi standart HTML niteliklerini uymanızı tavsiye nameüzerine inputcihazın girişleri tespit etmek Elements. Ayrıca, durumunuza başka değerler ekleyerek oluşturulabildiğinden "toplam" değerini ayrı bir değer olarak tutmanız gerekmez:

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

Sen kullanabilirsiniz .bindparametreleri önceden inşa etmek yöntemi handleChangeyöntemiyle. Şöyle bir şey olurdu:

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

( totalYapılması önerilen şey olduğu için render zamanında da hesaplandım.)

onChangeOlay kabarcıklar ... Böyle bir şey yapabiliriz Yani:

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

Ve setField yönteminiz şu şekilde görünebilir (ES2015 veya daha yenisini kullandığınızı varsayarsak:

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

Birkaç uygulamada buna benzer bir şey kullanıyorum ve oldukça kullanışlı.

Kullanımdan kaldırılmış çözüm

valueLink/checkedLinkolan kaldırılan bazı kullanıcıların kafa karıştırıcı çünkü çekirdekten, yanıt verin. React'ın son bir sürümünü kullanırsanız bu yanıt çalışmaz. Ancak isterseniz, kendi Inputbileşeninizi oluşturarak kolayca taklit edebilirsiniz

Eski cevap içeriği:

Ulaşmak istediğiniz şey, React'in 2 yollu veri bağlama yardımcılarını kullanarak çok daha kolay bir şekilde elde edilebilir.

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

Kolay değil mi?

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

Kendi karışımınızı bile uygulayabilirsiniz

Bunu şu şekilde de yapabilirsiniz:

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

Adlı özel bir Reactözniteliği kullanabilir refve ardından ' işlevini onChangekullanarak etkinlikteki gerçek DOM düğümlerini eşleştirebilirsiniz :ReactgetDOMNode()

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

@ErkekTerimleri

Çok alanlı formlar söz konusu olduğunda, React'in temel özelliği olan bileşenleri kullanmak mantıklıdır.

Projelerimde, minimum değer pervanesi alan TextField bileşenleri oluşturuyorum ve bir girdi metin alanının ortak davranışlarını ele almayı sağlıyor. Bu şekilde, değer durumunu güncellerken alan adlarını takip etme konusunda endişelenmenize gerek kalmaz.

[...]

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} />;
}

[...]

Tek bir çocuğun değerini yöneten inputayrı bir InputFieldbileşen oluşturarak her bir çocuğun değerini izleyebilirsiniz input. Örneğin şunlar InputFieldolabilir:

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

Artık her bir alt öğeyi izlemek için ebeveynin durumunda ayrı değerler oluşturmadan her birinin değeri inputbu InputFieldbileşenin ayrı bir örneği içinde izlenebilir .

Soruna gerçekten basit bir çözüm sunacağım. İki girişimiz olduğunu varsayalım usernamevepassword , ama biz yeniden kullanmak ve yazma Demirbaş kodu yok böylece bizim sapı, kolay ve jenerik olmak istiyorum.

I. formumuz:

                <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.Kurulumuzu yapmak istediğimiz kurucumuz usernameve passwordonlara kolayca erişebilmemiz için:

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

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

III.Tek bir onChangeolayla ilginç ve "genel" tanıtıcı buna dayanır:

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

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


    event.preventDefault();
}

Açıklamama izin ver:

Bir değişiklik tespit edildiğinde 1.When onChange(event)denir

2. sonra alanın isim parametresini ve değerini alırız:

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

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

3. name parametresine dayanarak, değerimizi yapıcıdaki durumdan alır ve değerle güncelleriz:

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

Burada dikkat edilmesi gereken nokta, alan adının durumdaki parametrenizle eşleşmesi gerektiğidir

Umarım birine bir şekilde yardım ettim :)

Durumunuzun anahtarı giriş alanınızın adıyla aynı olmalıdır. Sonra bunu handleEvent yönteminde yapabilirsiniz;

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

Merhaba ssorallen cevabını geliştirdik . Fonksiyonu bağlamanız gerekmez, çünkü girişe onsuz erişebilirsiniz.

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