reactjs - 如何以 redux-form 发送更改操作?
问题描述
刚刚学习 redux-form 并从我的组件中尝试通过代码更改字段名:
Import React from 'react'
import { connect, dispatch } from 'react-redux'
import { Field, reduxForm, formValueSelector } from 'redux-form'
let SelectingFormValuesForm = props => {
const changeStuff = (props) => {
dispatch(change('selectingFormValues', 'firstName', 'Bertje'))
}
const {
favoriteColorValue,
fullName,
handleSubmit,
hasEmailValue,
pristine,
reset,
submitting,
change
} = props
return (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<div>
<Field
name="firstName"
component="input"
type="text"
placeholder="First Name"
/>
</div>
</div>
<div>
<label>Last Name</label>
<div>
<Field
name="lastName"
component="input"
type="text"
placeholder="Last Name"
/>
</div>
</div>
<div>
<label htmlFor="hasEmail">Has Email?</label>
<div>
<Field
name="hasEmail"
id="hasEmail"
component="input"
type="checkbox"
/>
</div>
</div>
{hasEmailValue && (
<div>
<label>Email</label>
<div>
<Field
name="email"
component="input"
type="email"
placeholder="Email"
/>
</div>
</div>
)}
<div>
<label>Favorite Color</label>
<div>
<Field name="favoriteColor" component="select">
<option />
<option value="#ff0000">Red</option>
<option value="#00ff00">Green</option>
<option value="#0000ff">Blue</option>
</Field>
</div>
</div>
{favoriteColorValue && (
<div
style={{
height: 80,
width: 200,
margin: '10px auto',
backgroundColor: favoriteColorValue
}}
/>
)}
<div>
<button type="submit" disabled={pristine || submitting}>
Submit {fullName}
</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
<button type="button" onClick={changeStuff}>
Change first name
</button>
</div>
</form>
)
}
// The order of the decoration does not matter.
// Decorate with redux-form
SelectingFormValuesForm = reduxForm({
form: 'selectingFormValues',// a unique identifier for this form
change: reduxForm.change,
dispatch:reduxForm.dispatch
})(SelectingFormValuesForm)
// Decorate with connect to read form values
const selector = formValueSelector('selectingFormValues') // <-- same as form name
SelectingFormValuesForm = connect(state => {
//debugger
// can select values individually
const hasEmailValue = selector(state, 'hasEmail')
const favoriteColorValue = selector(state, 'favoriteColor')
// or together as a group
const { firstName, lastName } = selector(state, 'firstName', 'lastName')
return {
hasEmailValue,
favoriteColorValue,
fullName: `${firstName || ''} ${lastName || ''}`
}
})(SelectingFormValuesForm)
export default SelectingFormValuesForm
当我点击这个“更改名字”按钮时,它会被执行。我从 redux-form 导入了更改操作。为什么我会收到此错误:
react-dom.development.js:283 Uncaught TypeError: (0, _reactRedux.dispatch) is not a function at changeStuff (SelectingFormValuesForm.js:20) at HTMLUnknownElement.callCallback (react-dom.development.js:143) at Object. invokeGuardedCallbackDev (react-dom.development.js:193)
解决方案
更改字段值的几种方法,但您可以使用以下方法change
:
import { change } from 'redux-form';
- 添加
change
到mapDispatchToProps
对象。 - 添加
mapDispatchToProps
为connect
第二个参数(如果mapStateToProps
不需要,那么它就是connect(null, mapDispatchToProps)
. - 用,和调用
this.props.change
or 。props.change
formname
fieldname
value
- 可选--
PureComponent
在调用辅助表单操作时使用 a -- 更易于阅读和测试。
推荐阅读
- asp.net-core - 使用 UseStatusCodePagesWithReExecute 并显示消息未按预期工作
- c# - 将 XAML 窗口转换为位图
- mysql - mysql 根据输入在列中查找最“真”的行
- appium-android - 无法使用 bat 文件启动 appium 1.9.0
- java - Java http代理SocketException:来自服务器连接重置的文件意外结束
- cassandra - 如何在 cassandra 流式传输时增加每个主机的连接
- react-native - 上下左右阴影宽度不同
- mysql - 在 MySQL 5.7 中找不到与列列表匹配的 FULLTEXT 索引
- jquery - jquery如何用ca调用函数
- javascript - 在 es6 中动态运行函数