reactjs - 在纯 ES2015 函数中对 "setState"使用react

标签 reactjs redux react-redux

在这里 react 新手。我有一个返回表单(演示组件)的纯函数。在此表单中,我需要处理受控制的文本字段的 onChange 事件。 FWIU,我需要在 onChange 事件处理程序中使用 this.setState(...) 。然而,由于这是一个纯函数,我无法访问 this.setState()。有没有一种好的方法可以在 ES2015 函数中设置这些 onChange 事件的状态?如果有帮助的话我也在使用 redux。示例代码:

import React, {PropTypes} from 'react'

const ApplicationForm = ({submitHandler, person}) => (
<form onSubmit={e => submitHandler(e)}>
 <div>
            <label htmlFor="firstName">First Name:</label>
            <input type="text" name="firstName" onChange={e => setState(e.target.value)} value={person.firstName || ''}/>
 </div>
...
</form>
)

最佳答案

这是一个Stateless Function ,没有状态可设置

如果您使用的是 redux,您可能希望在 onChange 中触发 redux 操作,将新值作为参数传递,并让该操作更新 redux 存储中 person.firstName 的 firstName 值

我建议您查看 redux-form减少一堆样板文件

关于reactjs - 在纯 ES2015 函数中对 "setState"使用react,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38983526/

相关文章:

javascript - 重新选择选择器功能未执行

javascript - 修复 'Cannot read property handleClick of undefined error'(以及与从 DOM 中删除项目相关的问题)

javascript - 处理 react.js 中未定义 Prop 的最佳方式是什么?

JavaScript - 如何合并/附加到对象/数组 - ReactJS - 传播语法

javascript - react-google-maps 在用户提交后呈现标记

javascript - 飞行前响应中的 Access-Control-Allow-Methods 不允许方法 PATCH

javascript - 如何在 redux 中强制执行数据约束

reactjs - 创建客户端时无法连接到 twilsock

reactjs - 如何使用 AWS Load Balancer 在子目录中部署 React 应用程序

javascript - meteor react 设计 - 嵌套组件 : function call