Question

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

我正在构建一个需要超过100个复选框的表单，我不想写＃34; onChange＆＃34;每个复选框的功能。

有没有办法可以编写一个OnChange函数来获取参数，然后将状态设置为该参数？

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

谢谢！

＆＃13;

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

＆＃13;

Answer 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 })
  }
}

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

1 个答案: