我正在使用 redux-form 6.0.0-rc.5,并且我正在尝试显示用户输入的表单值。
但是,我希望这些值从另一个组件显示,而不是 redux 表单本身。
所以,我的简化应用程序架构将是这样的:
<App /> -> (main component -container ?-)
<List /> -> (connect to form values and pass them down)
<Elem /> -> (display form value)
<Form /> -> (enter form values)
该组件是一个安装到“form”的 redux-form,并且正在工作。
Form = reduxForm({
form: 'formName'
})(Form)
获取表单值(从状态 form.formName.values)并将其发送到我的显示组件的好方法是什么?
我尝试过的事情:
将App连接到商店和mapStateToProps (form.formName.values),然后将其作为 prop 传递给 Display。但它会引发错误,因为在用户输入任何内容之前,表单状态中不存在值。
在 List 组件中使用 redux-form 提供的函数 getFormValues('formName') 但它返回一个函数或未定义:
埃莱姆
const Elem = ({ name }) => (
<li>{name}</li>
)
列表
const List = ({ values }) => (
{values.map(value => <Elem name={value.name} />)}
)
List = connect(
state => ({
values: getFormValues('formName')
})
)(List)
一定是我遗漏了一些东西,或者我仍然没有正确理解它是使用 redux-form 还是 redux 本身......我希望有人能够启发我!
谢谢您,祝您有美好的一天。
最佳答案
尝试使用
List = connect(
state => ({
values: getFormValues(state.form.formName)
})
)(List)
相反。至少在 v5 中它是这样工作的,尽管该方法被称为 getValues
而不是 getFormValues
。
编辑:
快速浏览一下文档后,您似乎在 v6 中必须使用 formValueSelector
:http://redux-form.com/6.0.0-rc.3/examples/selectingFormValues/
关于reactjs - redux 形式 : How to display form values on another component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39036773/