使用單一handleInputChange方法對多個輸入字段（反應）

Question

我有一個表格，在響應」

render() { 
    return (
     <div> 
     <form onSubmit={this.onFormSubmit}> 
      <input 
      value={this.state.first} 
      /> 

      <input 
      value={this.state.second} 
      /> 

      <input 
      value={this.state.third} 
      /> 
      //.... many more 
     </form> 
    //... 
)} 

我handleInputChange通常是這樣的：

handleInputChange(e) { 
    this.setState({value: e.target.value }); 
    } 

現在，因爲我有許多不同的輸入字段，我通常會做很多不同的handleInputChange方法。但是，所有這些處理輸入更改的東西基本上都是相同的：它們根據當前正在編輯哪個輸入字段重新設置狀態

怎麼會的我，而不是寫三種handleInputChange方法都做這樣的事情：

handleInputChangeFirst(e) { 
    this.setState({first: e.target.value }); 
    } 
    handleInputChangeSecond(e) { 
    this.setState({second: e.target.value }); 
    } 

...做到這一切與一個單一的handleInputChange，需要然後檢查其值更新？我如何讓handleInputChange知道正在編輯的輸入字段並作出相應的反應？

Answer 1

你可以有一個通用的方法handleInputChange：

handleInputChange(property) { 
    return e => { 
    this.setState({ 
     [property]: e.target.value 
    }); 
    }; 
} 

那你會這樣使用：

<input 
    value={this.state.first} 
    onChange={this.handleInputChange('first')} 
/>