Question

我调用一个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方法？

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

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意味着每次调用都会创建一个新实例。另一种方法是提取name形式的event.target并在输入中创建一个name属性。然后，您无需显式传递输入名称。

Answer 2

由于状态是一个对象，因此您可以更新其键和值。您要做的就是将正确的参数传递给将更新状态的通用更新函数。

由于您的有效负载是下一层的条目，因此我们将使用传播运算符并传播有效负载对象。更新所需的值，最后将有效负载返回给setState函数，以更新状态并重新呈现组件。

您可以将此功能绑定到每个字段，并保持状态更新。

在此处了解有关处理事件和绑定函数的更多信息：https://reactjs.org/docs/handling-events.html