フォーム要素のonChangeイベントに対して単一の関数を実装し、特定の入力要素で発生したイベントを追跡できますか？

Question

これは、現在、フォームデータを再生するためにフォームを処理する方法です。

render() 
{ 
    return (
     <form> 
      <input type="text" name="username" onChange={event => this.handleUsernameChange(event)} /> 
      <input type="password" name="password" onChange={event => this.handlePasswordChange(event)} /> 
      <input type="checkbox" name="remember_me" onChange={event => this.handleRememberMeChange(event)}> Remember Me 
     </form> 
    ); 
} 

onUsernameChange(event) 
{ 
    this.setState({ username: event.target.value }); 
    ... 
} 

onPasswordChange(event) 
{ 
    this.setState({ password: event.target.value }); 
    ... 
} 

多くの要素を含むより大きなフォームの場合、すべての要素にonElementChange（）関数を書くのは面倒です。フォーム要素に単一のonChange関数を記述し、変更が発生した要素のイベントとプロパティを取得することは可能ですか？

<form id="form" onChange={event => this.onFormChange(event)}> 
    <input type="text" name="username" /> 
    <input type="password" name="password" /> 
    <input type="checkbox" name="remember_me"> Remember Me 
</form> 

onFormChange(event) 
{ 
    ... 
    this.setState({ ... }) 
} 

Answer 1

はい可能です。それは、すべての入力フィールドのための共通のonChange関数を記述し、状態変数名にアクセスして、このようなonChange関数内部その状態変数を更新するe.target.nameを使用し、その後、状態変数名と同じ各入力フィールドに名前を定義するため

：

<form id="form"> 
    <input type="text" name="username" onChange={this.onFormChange}/> 
    <input type="password" name="password" onChange={this.onFormChange}/> 
    <input type="checkbox" name="remember_me" onChange={this.onFormChange}/> Remember Me 
</form> 

onFormChange(e){ 
    let target = e.target; 
    this.setState({ 
     [target.name]: target.type == 'checkbox' ? target.checked : target.value 
    }) 
} 

とコンストラクタの内部onFormChange機能バインド：

this.onFormChange = this.onFormChange.bind(this);