反応中のイベントリスナーが重複しないようにするにはどうすればよいですか？

Question

私は多くの入力コンポーネントと反応す​​るフォームを持っています。私は、私が構築するすべての入力コンポーネントに対して、新しいonChangeハンドラメソッドを記述する必要があるのは嫌いです。だから私は繰り返しコードを止める方法を知りたい。

新しい関数を書く代わりに、同じ関数を再利用して余分な値を渡しています。これは正しい方法ですか？どのように他の経験豊かな人々がこの問題を解決しますか。

Answer 1

あなたの親コンポーネントが「インプット」の子コンポーネントに存在する各入力フィールドの値を持つ状態を維持したい場合は、次のように単一の変更ハンドラでこれを達成することができます

handleChange(id, value) { 
    this.setState({ 
     [id]: value 
    }); 
    } 

idおよびvalueは、Inputコンポーネントから得られます。ここで

はデモです：http://codepen.io/PiotrBerebecki/pen/rrJXjKと完全なコード：

class App extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     input1: null, 
     input2: null 
    }; 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(id, value) { 
    this.setState({ 
     [id]: value 
    }); 
    } 

    render() { 
    return (
     <div>  
     <Input id="input1" 
       changeHandler={this.handleChange} />  
     <Input id="input2" 
       changeHandler={this.handleChange} />   
     <p>See input1 in parent: {this.state.input1}</p> 
     <p>See input2 in parent: {this.state.input2}</p> 
     </div> 
    ); 
    } 
} 

class Input extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     userInput: null 
    }; 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(event) { 
    const enteredText = event.target.valuel 
    this.setState({ 
     userInput: enteredText 
    }, this.props.changeHandler(this.props.id, enteredText)); 
    } 

    render() { 
    return (
     <input type="text" 
      placeholder="input1 here..." 
      value={this.state.userInput} 
      onChange={this.handleChange} /> 
    ); 
    } 
} 

ReactDOM.render(<App />, document.getElementById('app')); 

Answer 2

従来の方法と同じように、event delegationを試すことができます。

つまり、関数を親のform要素にバインドするだけで、子供たちからバブルアップするすべてのイベントをリッスンします。input elments。