リアクション - this.input.value対ハンドル変更

Question

何が良いですか？

私は10入力のフォームを持っています。

this.input.valueを使用するか、変更を処理してstateに保存する必要がありますか？ドキュメントから

handleChange(e) { 
    this.setState({input: e.target.value}); 
} 
... 
<input type="text" value={this.state.input} onChange={this.handleChange} /> 

または

onSubmit() { 
    const inputValue = this.input.value; 
    ... 
} 
... 
<input type="text" ref={(input) => {this.input = input;}} /> 

：

制御入力を設定する参考文献

There are a few good use cases for refs: 

    Managing focus, text selection, or media playback. 
    Triggering imperative animations. 
    Integrating with third-party DOM libraries. 

Avoid using refs for anything that can be done declaratively. 

Answer 1

を使用するための痛みのようなものが、私ですこのパターンを使うo少し楽にしてください。

は、すべての入力のための1つのonChangeイベントハンドラを作成します。次に

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

を、あなたの入力のために、それを更新するために、あなたの状態でキーと一致nameを与えるようにしてください。

render() { 
    const { firstName, lastName, email, acceptTerms } = this.state; 
    return (
     <form> 
      <input name="firstName" onChange={this.handleInputChange} value={firstName} /> 
      <input name="lastName" onChange={this.handleInputChange} value={lastName} /> 
      <input name="email" onChange={this.handleInputChange} value={email} /> 
      <input type="checkbox" name="acceptTerms" onChange={this.handleInputChange} checked={acceptTerms} /> 
     </form> 
    ) 
}