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

当你取消选中复选框时，这也会处理。

将对象绑定到react中的多个事件

2 个答案: