反応内の複数のイベントにオブジェクトをバインドする

Question

ここで初心者の質問に反応してください：

チェックボックスには複数のフィルタを持つ検索フォームがあります。ここで私はあなたがチェックボックスのonChangeイベントをイベントハンドラにバインドしなければならないと考えています。よりその10個のチェックボックスがあるかもしれないので、私はそうのようなフィルタオブジェクトでこれらのチェックボックスの結果を入れたいと思います：

this.state = { 
    categoryFilter: { 
    hr: false, 
    ict: false, 
    finance: false, 
    sales: false, 
    marketing: false 
    } 
}; 

は、理想的には私はコンポーネントに直接状態のcategoryFilterをバインドしたいと思います。以下のような

何か：

<MyCheckBox onChange={() => myEventHandler('finance')} label="finance"/> 

myEventHandler(name) { 
    switch(name) { 
case: 'finance': 
    this.props.categoryFilter.finance = true; 
    this.props.onCategoryChanged(); 
} 
} 

は、私が言ったように、私はそんなに良く解決策があるかもしれません反応する新しいんだけど、角度から来る、私は本当にここバインディングデータが欠落しています。

ここで問題になるのは、categoryFilterオブジェクトをコンポーネントにバインドする方法ですか？

Answer 1

ちょっと、公式のドキュメントで提供されているこの解決策をチェックしてください。次のコードでは、単一の関数を使用してすべての入力変更を処理します。

class Reservation extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     isGoing: true, 
     numberOfGuests: 2 
    }; 

    this.handleInputChange = this.handleInputChange.bind(this); 
    } 

    handleInputChange(event) { 
    const target = event.target; 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
    const name = target.name; 

    this.setState({ 
     [name]: value 
    }); 
    } 

    render() { 
    return (
     <form> 
     <label> 
      Is going: 
      <input 
      name="isGoing" 
      type="checkbox" 
      checked={this.state.isGoing} 
      onChange={this.handleInputChange} /> 
     </label> 
     <br /> 
     <label> 
      Number of guests: 
      <input 
      name="numberOfGuests" 
      type="number" 
      value={this.state.numberOfGuests} 
      onChange={this.handleInputChange} /> 
     </label> 
     </form> 
    ); 
    } 
} 

あなたはCodePenでこれを試すことができたり、詳細をしたい場合、あなたはそれをhere確認することができます。

Answer 2

あなたは、これはまた、あなたがチェックボックスのチェックを外す場合を扱うこの

<MyCheckBox onChange={myEventHandler.bind(this, 'finance')} label="finance"/> 

myEventHandler(name) { 
    const newCategoryFilter = Object.assign(
    {}, 
    this.state.categoryFilter, 
    { [name]: !this.state.categoryFilter[name]} 
); 

    this.setState({ 
    categoryFilter: newCategoryFilter, 
    }); 
    this.props.onCategoryChanged(); 
} 

ような何かを行うことができます。