反應複選框。 DRY出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

你需要創建一個會返回特定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 }) 
    } 
}