将对象绑定到反应中的多个事件答案

【问题标题】：Bind object to multiple events in react将对象绑定到反应中的多个事件
【发布时间】：2017-03-20 13:27:11
【问题描述】：

在这里回答新手问题：

我得到了一个带有多个过滤器的搜索表单作为复选框。现在，我知道您必须将复选框的 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对象绑定到组件，react方式？

【问题讨论】：

标签： reactjs

【解决方案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 上查看。

【讨论】：

【解决方案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();
}

当您取消选中复选框时，这也会处理这种情况。

【讨论】：