1つのイベントハンドラをReact JSの異なる入力に接続する方法は？

Question

私はjsに反応するのが新しいです。

フォームに複数の入力があり、Reactで制御可能な入力アプローチを検討していますが、他のすべての入力に対して1つのイベントハンドラを使用してジョブを実行しようとしています。私はスタックオーバーフローでいくつかの参照を取って、これに来る。まだ私の入力ボックスの中に書くことができない理由を理解できません。

ここに私のコードです。

import React, {Component} from 'react'; 
import { Grid, Row, Col , Button } from 'react-bootstrap'; 

class ContactForm extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     name: '' , 
     email: '' 
    }; 
    this.handleChange = this.handleChange.bind(this); 
    } 

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

    render() { 
    return (
     <form> 
      <input name="input1" value={this.state.name} onChange={this.handleChange}/> 
      <input name="input2" value={this.state.email} onChange={this.handleChange} /> 
      <p>{this.state.name}, {this.state.email}</p> 
     </form> 
    ); 
    } 
} 


export default ContactForm; 

Answer 1

あなたは入力を識別するためにname属性を使用しているが、あなたは、レンダリング機能、「名前」、代わりに「INPUT1」の「電子メール」と「入力2」

で間違った値を読んでいますあなたが代わりにこれを行うことができ

：

<input name="input1" value={this.state.input1} onChange={this.handleChange}/> 
<input name="input2" value={this.state.input2} onChange={this.handleChange} /> 

または

<input name="name" value={this.state.name} onChange={this.handleChange}/> 
<input name="email" value={this.state.email} onChange={this.handleChange} /> 

をまたCHに必要があるだろう最初のオプションを使用している場合は、コンストラクタで

this.state = { 
    name: '' , 
    email: '' 
}; 

を入力してください。

Answer 2

私はこれを達成するために、REFを使用します。また

handleChange(e) { 
     const {input1, input2} = this.refs; 
     //do what ever you want with the values 

    } 

    render() { 
    return (
     <form> 
      <input name="input1" value={this.state.name} ref="input1" /> 
      <input name="input2" value={this.state.email} ref="input2" onChange={this.handleChange} /> 
      <p>{this.state.name}, {this.state.email}</p> 
     </form> 
    ); 
    } 
} 

を、私は入力