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

Question

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

我正在构建一个需要超过 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>
    );
  }
}

Answer 1

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

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

React checkbox. DRY out onChange function to handle all checkboxes

forms

checkbox

state

onchange

reactjs