在反應中將多個事件綁定對象

我得到了一個包含多個過濾器的搜索表單作爲複選框。現在在反應中，我明白你必須將複選框的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對象綁定到組件，反應的方式？

來源

2017-03-20 Elger Mensonides

嘿，看看這個官方文檔提供的解決方案。以下代碼使用單個函數來處理所有輸入更改。

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。

來源

2017-03-20 14:38:39

你可以做這樣的事情

<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(); 
}

如果沒有選擇此複選框，這也處理的情況。

來源

2017-03-20 14:40:07

在反應中將多個事件綁定對象

回答

相關問題