代码之家 › 专栏 › 技术社区 › Craig

对每个领域的变化做出反应-有更好的方法吗

reactjs javascript

Craig · 技术社区 · 6 年前

我调用一个API,获取一个有效负载并将其加载到状态。如:

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

在我的react屏幕上,我有显示这些数据的字段。目前,对于每个字段,我都有一个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方法?

2 回复 | 直到 6 年前

Sakhi Mansoor 6 年前

不,不建议这样写 onChange 每一个领域。您可以这样编写泛型onChange方法:

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

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

附言这里我们直接调用handleChange currying name event.target 创建一个 名称 输入中的属性。那么就不需要显式地传递输入名称。

Sivcan Singh 6 年前

因为状态是一个对象,这意味着您可以更新它的键和值。您所要做的就是将正确的参数传递给泛型更新函数,该函数将更新状态。

更新所需的值并最终将有效负载返回到 setState

可以将此函数绑定到每个字段并保持状态更新。

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Alex · 在轻量级中同时解构和不解构变量

3 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前