Redux-Form中如何在非提交按钮的onClick事件中获取表单字段值？

嗨，我懂你的困扰——不想占用submit按钮来做字段值的处理和填充，又不想硬去扒store的状态结构对吧？其实Redux-Form本身就提供了几种优雅的方式来实现这个需求，不用纠结直接访问store的麻烦。下面给你详细讲几种可行的方案：

方案1：利用Redux-Form注入的getValues和change props（最直接） #

当你用reduxForm()高阶组件包裹表单组件后，组件会自动收到一系列实用props，其中getValues和change正好能解决你的问题：

• getValues()：可以获取当前表单的所有字段值，也能传入单个字段名精准取值
• change(fieldName, value)：用来更新指定字段的值

直接在按钮点击事件里调用这两个方法就行，示例代码如下：

类组件示例 #

import React from 'react';
import { reduxForm, Field } from 'redux-form';

class MyForm extends React.Component {
  handleFillField = () => {
    const { getValues, change } = this.props;
    // 获取单个字段值，或用解构获取多个：const { fieldA, fieldB } = getValues();
    const sourceValue = getValues('sourceField');
    
    // 这里替换成你的业务处理逻辑
    const targetValue = `处理后的值：${sourceValue}`;
    
    // 更新目标字段
    change('targetField', targetValue);
  };

  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <Field name="sourceField" component="input" type="text" placeholder="源字段" />
        <Field name="targetField" component="input" type="text" placeholder="目标字段" />
        
        {/* 非提交按钮，注意type是button，避免触发表单提交 */}
        <button type="button" onClick={this.handleFillField}>
          填充目标字段
        </button>
        
        {/* 专属提交按钮 */}
        <button type="submit">提交表单</button>
      </form>
    );
  }
}

export default reduxForm({ form: 'myForm' })(MyForm);

函数组件示例 #

import React from 'react';
import { reduxForm, Field } from 'redux-form';

const MyForm = ({ handleSubmit, getValues, change }) => {
  const handleFillField = () => {
    const sourceValue = getValues('sourceField');
    const targetValue = `处理后的值：${sourceValue}`;
    change('targetField', targetValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <Field name="sourceField" component="input" type="text" placeholder="源字段" />
      <Field name="targetField" component="input" type="text" placeholder="目标字段" />
      
      <button type="button" onClick={handleFillField}>填充目标字段</button>
      <button type="submit">提交表单</button>
    </form>
  );
};

export default reduxForm({ form: 'myForm' })(MyForm);

方案2：使用formValueSelector结合connect（适合复杂状态处理场景） #

如果你需要在组件外部或者更复杂的逻辑里操作表单值，可以用Redux-Form提供的formValueSelector创建选择器，再通过connect把需要的字段映射到组件props：

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

// 传入你的表单名创建选择器
const selector = formValueSelector('myForm');

class MyForm extends React.Component {
  handleFillField = () => {
    // 直接从props获取字段值
    const { sourceField, change } = this.props;
    const targetValue = `处理后的值：${sourceField}`;
    change('targetField', targetValue);
  };

  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <Field name="sourceField" component="input" type="text" placeholder="源字段" />
        <Field name="targetField" component="input" type="text" placeholder="目标字段" />
        
        <button type="button" onClick={handleFillField}>填充目标字段</button>
        <button type="submit">提交表单</button>
      </form>
    );
  }
}

// 把需要的字段映射到组件props
const mapStateToProps = (state) => ({
  sourceField: selector(state, 'sourceField'),
});

// 注意顺序：先包裹reduxForm，再包裹connect
export default connect(mapStateToProps)(reduxForm({ form: 'myForm' })(MyForm));

方案3：函数组件用useSelector和useDispatch（React Hooks方式） #

如果你的项目用了React Hooks，也可以直接借助Redux的Hooks来实现：

import React from 'react';
import { reduxForm, Field, change } from 'redux-form';
import { useSelector, useDispatch } from 'react-redux';

const MyForm = ({ handleSubmit }) => {
  const dispatch = useDispatch();
  // 从store获取表单字段，注意路径是state.form[你的表单名].values.字段名
  const sourceField = useSelector(state => state.form.myForm.values?.sourceField);

  const handleFillField = () => {
    if (sourceField) {
      const targetValue = `处理后的值：${sourceField}`;
      // dispatch change action更新字段
      dispatch(change('myForm', 'targetField', targetValue));
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <Field name="sourceField" component="input" type="text" placeholder="源字段" />
      <Field name="targetField" component="input" type="text" placeholder="目标字段" />
      
      <button type="button" onClick={handleFillField}>填充目标字段</button>
      <button type="submit">提交表单</button>
    </form>
  );
};

export default reduxForm({ form: 'myForm' })(MyForm);

为什么不直接用store.getState？ #

Redux-Form的内部状态结构是state.form[formName].values，虽然你可以直接访问，但官方并不推荐——因为Redux-Form的内部状态格式可能在版本更新时发生变化，用官方提供的getValues、formValueSelector这些方法会更稳定，也更符合Redux-Form的设计规范。

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