时间戳

首页 > 解决方案 > 为每个领域反应 OnChange - 有没有更好的方法

javascript - 为每个领域反应 OnChange - 有没有更好的方法

问题描述

我调用 API，获取有效负载并将其加载到状态。例如：

Payload : {
   id: 1,
   firstName: 'Craig',
   surname: 'Smith',
   anotherField: 'test data',
   ....
}

（注意，现实生活中大约有 20 个字段）

在我的反应屏幕上，我有显示这些数据的字段。目前，对于每个字段，我都有一个 onChange 函数。所以：

this.firstnameOnChange = this.firstnameOnChange.bind(this);

然后是函数：

firstnameOnChange() { ....}

是否有更简单的模式可以减少我需要创建的方法数量？某种具有名称和值的通用 OnChange 事件，然后可用于更新状态？

我可以绑定到类似的东西：

myOnChange(fieldName, value) {
 // Somehow find the 'fieldName' in the state and update it's value with 'value'
}

这是一个有效的模式吗？或者，还有更好的方法？或者我应该坚持为每个字段使用单独的 OnChange 方法？

如果我可以通用，我将如何找到要更新的状态字段的名称？

标签： javascriptreactjs

解决方案

不，不建议onChange为每个字段都写。你可以像这样编写一个通用的 onChange 方法：

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

例如，您有这样的输入：

 <Input onChange={this.handleChange('firstName')} placeholder="Please Enter" />

PS这里我们直接调用handleChange，所以我们使用currying意味着为每次调用创建一个新实例。还有另一种方法是提取name表单event.target并在您的输入中创建一个name属性。然后您不需要显式传递输入名称。

推荐阅读