反应复选框。干掉 onChange 函数来处理所有的复选框答案

【问题标题】：React checkbox. DRY out onChange function to handle all checkboxes反应复选框。干掉 onChange 函数来处理所有的复选框
【发布时间】：2017-03-04 22:13:39
【问题描述】：

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

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

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

我尝试了很多方法，但这仍然阻止了我。

谢谢！

import React from 'react';

export default class InputSearch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputInternship: '',
      inputMidLevel: '',
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.onChangeInternship = this.onChangeInternship.bind(this);
    this.onChangeMidLevel = this.onChangeMidLevel.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    this.props.getJobData(this.state);
  }

  onChangeInternship(e) {
    this.setState({
      inputInternship: !this.state.inputInternship,
    });
    this.state.inputInternship == false? this.setState({ inputInternship: e.target.value }) : this.setState({ inputInternship: '' })
  }

  onChangeMidLevel(e) {
    this.setState({
      inputMidLevel: !this.state.inputMidLevel,
    });
    this.state.inputMidLevel == false? this.setState({ inputMidLevel: e.target.value }) : this.setState({ inputMidLevel: '' })
  }

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

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

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

【问题讨论】：

标签： forms reactjs checkbox state onchange

【解决方案1】：

您需要创建一个返回特定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>
    );
  }
}

顺便问一下，在 onChangeXYZ 函数中两次更改状态有什么意义？

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

【讨论】：

嘿 Slomek，我想我明白了你在这里的目的并尝试实施它。我已经破解了它，看看我是否可以让它工作，但我得到一个“无法读取未定义的‘setState’”
你说得对，我应该从onChange返回一个数组函数来保留this上下文。