Javascript 干反应代码具有多个相似的功能

我有下面的代码，我知道有一种方法可以让它更干燥。但我似乎不知道怎么做？我无法将状态设置为变量。谢谢

handleChangeN（事件）{
让numb=event.target.value；
this.setState（{N:numb}）；
}
handleChangeI（活动）{
让numb=event.target.value；
this.setState（{I:numb}）；
}
handleChangePV（事件）{
让numb=event.target.value；
this.setState（{PV:numb}）；
}
handleChangePMT（事件）{
让numb=event.target.value；
this.setState（{PMT:numb}）；
}
handleChangeFV（事件）{
让numb=event.target.value；
this.setState（{FV:numb}）；
}
handleChangePY（事件）{
让numb=event.target.value；
this.setState（{PY:numb}）；
}
手变（事件）{
让numb=event.target.value；
this.setState（{CY:numb}）；
}

类似的方法可能会奏效：

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

然后可以像这样绑定函数：

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

this.handleChange（事件，“N”）}/>

类似的方法可能会奏效：

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

然后可以像这样绑定函数：

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

this.handleChange（事件，“N”）}/>

您对每一项都有单独的功能，这是绝对的“必备”吗？调用函数时（可能使用.bind（）方法）是否可以传入类型（CY vs PY vs FV…）

这对我来说似乎干净多了：

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


// Somewhere later on ....


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

编辑：代码重复

对于每一项都有单独的功能，这是绝对的“必备”吗？调用函数时（可能使用.bind（）方法）是否可以传入类型（CY vs PY vs FV…）

这对我来说似乎干净多了：

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


// Somewhere later on ....


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

---

编辑：代码重复

这也是一种选择

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

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

然后，您可以像这样注册处理程序

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

返回

---

无论何时更改输入值，状态N都将与输入值相同。

这也是一种替代方法

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

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

然后，您可以像这样注册处理程序

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

返回

---

无论何时更改输入值，状态N都将与输入值相同。

啊，谢谢，这就是我最后所做的，只是想知道为什么prop必须成为第一个参数？假设我把它作为（事件、道具）保存。组件的外观如何？this.handleChange（“N”，event）}/>您不需要将prop作为第一个参数，您可以选择您喜欢的顺序。该组件将如下所示。handleChange（event，“N”）}/>。然后，您的函数将接收event first handleChange=（事件，属性）=>。。。如果需要，还可以重命名道具以获得更好的名称。我根据你的需要更新了我的例子。啊，谢谢你，这就是我最后所做的，只是想知道为什么道具必须成为第一个参数？假设我把它作为（事件、道具）保存。组件的外观如何？this.handleChange（“N”，event）}/>您不需要将prop作为第一个参数，您可以选择您喜欢的顺序。该组件将如下所示。handleChange（event，“N”）}/>。然后，您的函数将接收event first handleChange=（事件，属性）=>。。。如果需要，还可以重命名道具以获得更好的名称。我根据您的需要更新了我的示例。我最终选择了这个解决方案，因为我使用了bind，只是想知道。如果句柄更改是不可能的handleChange（事件、类型），组件会是什么样子。通过使用

bind

强制输入类型参数，它将始终是第一个参数。编辑：嗯，有一个怪物。。。。onClick（函数（事件）{handleChange（事件，“FV”）}）；啊，谢谢你。可以在react中绑定多个参数吗？非常感谢！对不起，我的反应技能基本上不存在，这只是纯JS。您可以在

this

之后插入任意数量的参数，只要记住它们是第一个参数。我最终选择了这个解决方案，因为我使用了bind，只是想知道。如果句柄更改是不可能的handleChange（事件、类型），组件会是什么样子。通过使用

bind

强制输入类型参数，它将始终是第一个参数。编辑：嗯，有一个怪物。。。。onClick（函数（事件）{handleChange（事件，“FV”）}）；啊，谢谢你。可以在react中绑定多个参数吗？非常感谢！对不起，我的反应技能基本上不存在，这只是纯JS。您可以在

this

之后插入任意数量的参数，只需记住它们是第一个参数。