我正在使用redux-form 6.0.0-rc.5,并且尝试显示用户输入的表单值。
但是,我希望这些值是从另一个组件而不是redux表单本身显示的。
因此,我简化的App架构将是这样的:
<App /> -> (main component -container ?-) <List /> -> (connect to form values and pass them down) <Elem /> -> (display form value) <Form /> -> (enter form values)
该组件是安装在“表单”上的Redux表单,正在运行。
Form = reduxForm({ form: 'formName' })(Form)
从状态form.formName.values获取表单值并将其发送到我的Display组件的一种好方法是什么?
我尝试过的事情:
将 App 连接到商店和 mapStateToProps (form.formName.values),然后将其作为道具传递给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。
getValues
getFormValues
编辑:快速浏览一下看来在v6中的文档后,您将必须使用formValueSelector:http : //redux- form.com/6.0.0-rc.3/examples/selectingFormValues/
formValueSelector