反応チェックボックス。すべてのチェックボックスを処理するonChange関数を実行します

Question

次のコードでは、2つのチェックボックスがあります。オンクリックすると、コンポーネントの状態がそれぞれの値に変更されます。

私は100以上のチェックボックスが必要なフォームを構築しており、各チェックボックスに "onChange"関数を記述したくありません。

1つの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

：ところで

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関数で2倍になるものです？

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