javascript - 为每个领域使用react OnChange - 有没有更好的方法

Question

我调用 API，获取负载并将其加载到状态中。例如:

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

(注意，现实生活中大约有20个字段)

在我的 React 屏幕上，我有显示此数据的字段。目前，对于每个字段，我都有一个 onChange 函数。所以:

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

然后是函数:

firstnameOnChange() { ....}

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

我可以绑定(bind)到类似的东西:

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

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

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

Answer 1

不，不建议为每个字段都写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 意味着每次调用都会创建一个新实例。另一种方法是从 event.target 中提取 name 并在您的输入中创建一个 name 属性。那么你不需要显式传递输入名称。