Forms 反应复选框。DRY out onChange功能处理所有复选框

在下面的代码中，我有两个复选框。单击后，它们会将零部件的状态更改为各自的值

我正在构建一个需要100多个复选框的表单，我不想为每个复选框编写“onChange”函数

有没有一种方法可以让我编写一个OnChange函数来接受一个参数，然后将状态设置为该参数

我尝试了很多方法，但这仍然阻碍着我

谢谢大家!

从“React”导入React；
导出默认类InputSearch扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
输入权限：“”，
inputMidLevel:“”，
};
this.handleSubmit=this.handleSubmit.bind（this）；
this.onchangeInterpolation=this.onchangeInterpolation.bind（this）；
this.onChangeMidLevel=this.onChangeMidLevel.bind（this）；
}
handleSubmit（e）{
e、 预防默认值（）；
this.props.getJobData（this.state）；
}
在职实习（e）{
这是我的国家({
InputIntership:！this.state.InputIntership，
});
this.state.inputintership==false？this.setState（{inputintership:e.target.value}）：this.setState（{inputintership:''}）
}
更改中层（e）{
这是我的国家({
inputMidLevel:！this.state.inputMidLevel，
});
this.state.inputMidLevel==false？this.setState（{inputMidLevel:e.target.value}）：this.setState（{inputMidLevel:'}）
}
render（）{
返回(
实习

中级

搜寻
);
}
}

您需要创建一个函数，该函数将返回特定的

onChange

函数：

import React from 'react';

export default class InputSearch extends React.Component {
  constructor(props) {
    ...
    this.onChange = this.onChange.bind(this);
  }

  ...

  onChange(fieldName) {
    return (event) => {
      this.setState({
        [fieldName]: !this.state[fieldName],
      });

      if (this.state[fieldName]) {
        this.setState({ [fieldName]: '' })
      } else {
        this.setState({ [fieldName]: e.target.value })
      }
    }
  }

  ...

  render() {
    return (
      <div className="search-form">
        <form onSubmit={this.handleSubmit}>

        <input type="checkbox" value="level=Internship&" checked={this.state.inputInternship} onChange={this.onChange('inputInternship')} /> Internship <br />
        <input type="checkbox" value="level=Mid+Level&" checked={this.state.inputMidLevel} onChange={this.onChange('inputMidLevel')} /> Mid Level <br />

          <div>
            <button
              type="submit"
            >Search
            </button>
          </div>
        </form>
      </div>
    );
  }
}

---

嘿，斯洛梅克，我想我明白你在这里要做什么，并且已经试着去实现它了。我已经对它进行了黑客攻击，想看看是否可以让它工作，但我得到了一个“无法读取”的未定义“setState”。你是对的，我应该从

onChange

返回一个数组函数来保存

这个

上下文。

{
  this.setState({
    [fieldName]: !this.state[fieldName],
  });
  if (this.state[fieldName]) {
     this.setState({ [fieldName]: '' })
  } else {
     this.setState({ [fieldName]: e.target.value })
  }
}