Penasaran apa cara yang tepat untuk mendekati ini adalah:

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

Jelas Anda bisa membuat fungsi handleChange yang terpisah untuk menangani setiap input yang berbeda, tapi itu tidak terlalu bagus. Demikian pula Anda dapat membuat komponen hanya untuk input individu, tetapi saya ingin melihat apakah ada cara untuk melakukannya seperti ini.

Saya sarankan tetap menggunakan atribut HTML standar seperti namepada inputElemen untuk mengidentifikasi input Anda. Selain itu, Anda tidak perlu menjaga "total" sebagai nilai terpisah di negara karena itu dapat dikompilasi dengan menambahkan nilai lain di negara Anda:

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

Anda dapat menggunakan .bindmetode ini untuk membuat parameter terlebih dahulu ke handleChangemetode. Itu akan menjadi sesuatu seperti:

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

(Saya juga dibuat totaldihitung pada waktu render, karena itu adalah hal yang disarankan untuk dilakukan.)

The onChangeevent gelembung ... Jadi Anda bisa melakukan sesuatu seperti ini:

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

Dan metode setField Anda mungkin terlihat seperti ini (dengan asumsi Anda menggunakan ES2015 atau lebih baru:

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

Saya menggunakan sesuatu yang mirip dengan ini di beberapa aplikasi, dan itu sangat berguna.

Solusi usang

valueLink/checkedLinktidak digunakan lagi dari core Bereaksi, karena membingungkan sebagian pengguna. Jawaban ini tidak akan berfungsi jika Anda menggunakan React versi terbaru. Tetapi jika Anda suka, Anda dapat dengan mudah meniru dengan membuat Inputkomponen Anda sendiri

Konten jawaban lama:

Apa yang ingin Anda capai bisa jauh lebih mudah dicapai dengan menggunakan 2-way data binding help of 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'));

Mudah bukan?

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

Anda bahkan dapat menerapkan mixin Anda sendiri

Anda juga dapat melakukannya seperti ini:

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

Anda dapat menggunakan khusus Reactatribut yang disebut refdan kemudian mencocokkan node DOM nyata dalam onChangeacara menggunakan React's getDOMNode()fungsi:

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

Ketika datang ke bentuk multi-bidang, masuk akal untuk menggunakan fitur utama React: komponen.

Dalam proyek saya, saya membuat komponen TextField, yang mengambil prop nilai minimal, dan menangani penanganan perilaku umum bidang input teks. Dengan cara ini Anda tidak perlu khawatir tentang melacak nama bidang saat memperbarui status nilai.

[...]

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

[...]

Anda dapat melacak nilai setiap anak inputdengan membuat InputFieldkomponen terpisah yang mengelola nilai satu anak input. Misalnya InputFieldbisa:

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

Sekarang nilai masing-masing inputdapat dilacak dalam instance terpisah dari InputFieldkomponen ini tanpa membuat nilai terpisah dalam status induk untuk memantau setiap komponen anak.

Saya akan memberikan solusi yang sangat sederhana untuk masalah ini. Misalkan kita memiliki dua input usernamedan password, tetapi kita ingin pegangan kita menjadi mudah dan generik, sehingga kita dapat menggunakannya kembali dan tidak menulis kode boilerplate.

I. bentuk Kami:

                <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. Konstruktor kami, yang ingin kami simpan usernamedan password, sehingga kami dapat mengaksesnya dengan mudah:

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

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

III. Pegangan yang menarik dan "generik" dengan hanya satu onChangeacara didasarkan pada ini:

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

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


    event.preventDefault();
}

Biarkan saya jelaskan:

1.When perubahan terdeteksi onChange(event)itu disebut

2.Kemudian kita mendapatkan parameter nama field dan nilainya:

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

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

3. Berdasarkan parameter nama, kami mendapatkan nilai kami dari status di konstruktor dan memperbaruinya dengan nilai:

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

4. Kunci yang perlu diperhatikan di sini adalah bahwa nama bidang harus cocok dengan parameter kami di negara bagian

Semoga saya membantu seseorang entah bagaimana :)

Kunci negara Anda harus sama dengan nama bidang input Anda. Kemudian Anda dapat melakukan ini dalam metode handleEvent;

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

Hai, sudah memperbaiki jawaban sallallen . Anda tidak perlu mengikat fungsi karena Anda dapat mengakses input tanpa itu.

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