首页 文章

redux-form：如何在另一个组件上显示表单值

提问于
浏览 次
5

我正在使用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)

What would be a good way of getting the form values (from state form.formName.values) and send them to my Display component ?

我尝试过的事情：

  • 将 App 连接到商店和mapStateToProps（form.formName.values），然后将其作为道具传递给Display . 但它会抛出一个错误，因为在表单状态中不存在值，直到用户输入任何内容为止 .

  • 使用List组件内的redux-form提供的函数 getFormValues （'formName'），但它返回一个函数或未定义：

Elem

const Elem = ({ name }) => (
  <li>{name}</li>
)

List

const List = ({ values }) => (
  {values.map(value => <Elem name={value.name} />)}      
)

List = connect(
  state => ({
    values: getFormValues('formName')
  })
)(List)

必须有一些我缺少的东西，或者我仍然无法正确理解它是使用redux-form还是redux本身...我希望有人能够启发我！

谢谢你，祝你有个美好的一天 .

reactjs redux react-redux redux-form

4 回答

  • 1

    我有同样的问题 . 显然，'values'是redux-form中保存的名称 . 使用Iurii Budnikov建议我设法解决了问题 - 只需将变量名称从'values'更改为connect调用中的其他内容：

    List = connect(
  state => ({
    formValues: getFormValues(state.form.formName)
  })
)(List)
    回复于
  • 0

    formValueSelector()没有必要 .

    您也可以直接将其作为 property 访问 .

    List = connect(
  state => ({
    formValues: {
       id: state.form.formName.values.id
    }
  })
)(List)

    与...一样

    List = connect(
  state => ({
    formValues: {
       id: formValueSelector('formName')(state, 'id')
    }
  })
)(List)
    回复于
  • 6

    尝试使用

    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/

    回复于
  • 3

    从redux-form 6.0.0 开始（在 7.0.0 中仍然相同），您可以使用函数 formValueSelector() 从应用程序中的任何redux表单中选择值：http://redux-form.com/7.0.0/docs/api/FormValueSelector.md/

    import { connect } from 'react-redux';
import { formValueSelector } from 'redux-form';

const selector = formValueSelector('formName');

List = connect(
  state => ({
    name: selector(state, 'name')
  })
)(List)
    回复于

相关问题