Question

我在下面有以下代码，我知道有一种方法可以让它更干。但我似乎无法弄清楚如何？我不能把国家变成一个变数。谢谢！

＆＃13;

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

＆＃13;

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

这是绝对的＆＃34;必须拥有的＆＃34;你有这些功能的独立功能吗？调用函数时可能传递类型（CY vs PY vs FV ...）（可能使用.bind（）方法？）。

这对我来说似乎更清洁了：

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将与输入相同。

DRY反应编码多个类似的功能

4 个答案: