異なる入力に対して1つのイベントハンドラを使用する

Question

Reactアプリケーションの単純な連絡先フォームでonChangeを処理するとき、どのようにDRYコードと整列させるのですか？私は単純であり、4つの入力[名前、電話、電子メール、テキスト]は成分の異なる状態を更新する4種類のEventHandlerを必要有する、例えば

を更新すべき状態とPARAMを渡したい

偉大ではない。

constructor(props) { 
    super(props); 
    this.state = { 
     type: '', 
     message: '', 
     name: '', 
     email: '', 
     phone: '', 
     content: '' 
    }; 
    } 
    handleChange(e, state) { 
    this.setState({state: e.target.value}); 
    alert(state + " with val " + e.target.value) 
    } 

これは動作しないと

<input value={this.state.name} onChange={this.handleChange(name).bind(this)} id="firstName" name="firstName" autocomplete="off" type="text" required /> 

Answer 1

未定義のエラーのプロパティを読み取ることができません「の値を」投げあなたはhandleChangeため、この

onChange={ this.handleChange.bind(this, name) } 

と署名のようhandleChangeに引数を渡す必要がありますhandleChange(state, e) {}

---

またはあなたが使用することができますarrow function

onChange={ (e) => this.handleChange(e, name) } 

---

更新あなたの問題の説明に基づいて

、私はあなたが、あなたが入力nameを取ることができ、追加の引数を渡す必要はありませんと仮定（この場合、入力名と状態名は同じとすることができます）と同様に行うことができると思います

class Form extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    
 
    this.state = { 
 
     // type: '', 
 
     // message: '', 
 
     name: '', 
 
     email: '', 
 
     // phone: '', 
 
     // content: '' 
 
    }; 
 
    this.handleChange = this.handleChange.bind(this); 
 
    } 
 
    
 
    handleChange(e) { 
 
    this.setState({ [e.target.name]: e.target.value }) 
 
    } 
 
    
 
    render() { 
 
    return <div> 
 
     <input 
 
     value={this.state.name} 
 
     onChange={ this.handleChange } 
 
     name="name" 
 
     autocomplete="off" 
 
     type="text" 
 
     required 
 
     /> 
 
      
 
     <input 
 
     value={this.state.email} 
 
     onChange={ this.handleChange } 
 
     name="email" 
 
     autocomplete="off" 
 
     type="text" 
 
     required 
 
     /> 
 
      
 
     <p>{this.state.name},{this.state.email}</p> 
 
    </div> 
 
    } 
 
}; 
 

 
ReactDOM.render(<Form />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>