如何在另一个组件中获取Redux-Form表单值？（v7.3.0）

看来你已经找对路子了——formValueSelector正是Redux-Form官方推荐的跨组件获取表单值的工具，只是代码没写完而已。我来帮你补全实现并把关键点说清楚：

完整实现步骤 #

首先要确认你的表单组件在使用reduxForm()包装时指定的form名称（比如假设是myTargetForm），这个名称是跨组件取值的核心标识，必须完全匹配。接下来修改你的Test组件：

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

class Test extends React.Component {
  render() {
    // 现在可以直接从props中获取表单字段值
    console.log('单个title字段值:', this.props.title);
    console.log('整个表单的所有值:', this.props.fullFormValues);
    return ( <div> test {this.props.title} </div> );
  }
}

// 1. 创建对应目标表单的选择器，替换成你实际的表单名称
const formSelector = formValueSelector('myTargetForm');

// 2. 将redux store中的表单值映射到组件props
const mapStateToProps = state => ({
  // 获取单个指定字段的值（比如这里的title）
  title: formSelector(state, 'title'),
  // 获取整个表单的所有值，两种方式二选一即可
  fullFormValues: state.form.myTargetForm.values,
  // 或者用getFormValues工具函数
  // fullFormValues: getFormValues('myTargetForm')(state)
});

// 3. 用connect包装组件，完成props注入
export default connect(mapStateToProps)(Test);

关键注意事项 #

• 表单名称必须完全一致：formValueSelector('myTargetForm')里的名称，必须和你表单组件中reduxForm({ form: 'myTargetForm' })的form参数一模一样，否则会找不到对应表单的数据。
• 多字段获取：如果需要同时拿多个字段值，可以在selector里传入多个字段名，比如formSelector(state, 'title', 'content', 'author')，对应的props会依次拿到这些字段的值。
• 空值处理：如果表单字段还未被用户填写，拿到的会是undefined，可以在组件里做默认值处理，比如this.props.title || '默认标题'。

快速排查小技巧 #

如果还是拿不到值，可以先在mapStateToProps里打印state.form，看看你的目标表单名称是否存在、values对象里有没有对应的字段——这能快速定位是表单名称写错了，还是字段名不匹配。

内容的提问来源于stack exchange，提问作者ILoveReactAndNode