DRY反応複数の類似の機能をコード

Question

私は以下のコードを持っていますが、もっと乾燥させる方法があります。しかし、私はどのように見つけることができない？国家を変えることはできません。ありがとう！

handleChangeN(event){ 
 
    let numb = event.target.value; 
 
    this.setState({N: numb}); 
 
} 
 
handleChangeI(event){ 
 
    let numb = event.target.value; 
 
    this.setState({I: numb}); 
 
} 
 
handleChangePV(event){ 
 
    let numb = event.target.value; 
 
    this.setState({PV: numb}); 
 
} 
 
handleChangePMT(event){ 
 
    let numb = event.target.value; 
 
    this.setState({PMT: numb}); 
 
} 
 
handleChangeFV(event){ 
 
    let numb = event.target.value; 
 
    this.setState({FV: numb}); 
 
} 
 
handleChangePY(event){ 
 
    let numb = event.target.value; 
 
    this.setState({PY: numb}); 
 
} 
 
handleChangeCY(event){ 
 
    let numb = event.target.value; 
 
    this.setState({CY: numb}); 
 
}

Answer 1

このような何かがうまくいくかもしれない：

handleChange = (event, prop) => this.setState({ [prop]: event.target.value }); 

あなたは、このようなあなたの機能をバインドすることができます。

<Component onChange={event => this.handleChange(event, "N")} /> 

Answer 2

handleChange(event, code){ 
    const numb = event.target.value; 
    const toChange = {[code]: numb}; 
    this.setState(toChange); 
} 

Answer 3

それはABですあなたはこれらのそれぞれに別々の機能を持っている必要がありますか？関数が（.bind（）メソッドを使って）呼び出されたときに、型（CY対PY対FV ...）を渡すことは可能でしょうか？

これは私にたくさんのクリーナーようだ：

handleChange (type, event) { 
    this.setState({[type]: event.target.value}); 
} 


// Somewhere later on .... 


something.onClick(handleChange.bind(this, "FV")); 

編集：コード重複

Answer 4

これも選択肢です。

handleChanges(event) { 
    const target = event.target; 

    this.setState(
    { 
     [target.name]: target.value 
    } 
); 
} 

次に、このようなハンドラを登録できます。

return <input type='text' name='N' onChange={ this.handleChanges } /> 

状態の入力値を変更するたびに、Nは入力と同じになります。