リアクタの複数の入力要素に対するシングルハンドラ

Question

子コンポーネントからトップレベルの状態を更新する必要があります。子コンポーネントには、この目的のための複数の選択リストがあります。

私の子コンポーネントでは：私の親で

constructor(props) { 
    this.updateNoOfSets = this.updateNoOfSets.bind(this); 
    this.updateNoOfRounds = this.updateNoOfRounds.bind(this); 
} 

updateNoOfSets() { 
    this.props.updateNoOfSets(parseInt(this.updatedNoOfSets.value)); 
} 

updateNoOfRounds() { 
    this.props.updateNoOfRounds(parseInt(this.updatedNoOfRounds.value)); 
} 

<select 
    value={this.props.noOfSets} 
    onChange={this.updateNoOfSets} 
    ref={(input) => { 
    this.updatedNoOfSets = input; 
    }} 
> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select> 

<select 
    value={this.props.noOfRounds} 
    onChange={this.updateNoOfRounds} 
    ref={(input) => { 
    this.updatedNoOfRounds = input; 
    }} 
> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select> 

：

constructor(props) { 
    super(props); 
    this.updateNoOfSets = this.updateNoOfSets.bind(this); 
    this.updateNoOfRounds = this.updateNoOfRounds.bind(this); 
} 

updateNoOfSets(noOfSets) { 
    this.setState({'noOfSets': noOfSets}); 
} 

updateNoOfRounds(noOfRounds) { 
    this.setState({'noOfRounds': noOfRounds}); 
} 

これは作業が、私には非常に冗長思われます。これを書くためのより短い方法がありますか？私のコード例は2つの選択リストしか持っていませんが、私の実際のアプリケーションはもっと運賃があります。

Answer 1

選択要素ごとに複数のハンドラは必要ありません。必要なのは十分にインテリジェントで、単一のハンドラである

子：

constructor(props) { 
    this.updateValue = this.updateValue.bind(this); 
} 

updateValue(item, value) { 
    this.props.updateValue(item, parseInt(value)); 
} 

<select 
    value={this.props.noOfSets} 
    onChange={(e) => this.updateValue('noOfSets', e.target.value)} 
> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select> 

<select 
    value={this.props.noOfRounds} 
    onChange={(e) => this.updateValue('noOfRounds', e.target.value)} 
> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select> 

親：

constructor(props) { 
    super(props); 
    this.updateValue = this.updateValue.bind(this); 
} 

updateValue(item, value) { 
    this.setState({[item]: value}); 
} 

EDIT：render方法でbinding機能ではないことに注意してくださいレンダリングが実行されるたびに良いアイデアが返されます。新しい関数が返されます。how to avoid binding in render method