ReduxForm多字段联动实现问询：仅用Field组件绑定字段同步更新

好的，我来帮你解决Redux Form中多Field联动的问题。既然你不能用Fields组件，只能用Field，那咱们可以通过Redux Form提供的change action和表单/字段的回调来实现联动，具体有两种常用方式，我给你详细说明：

方式一：利用表单全局onChange统一处理联动 #

这种方式适合多个字段之间有复杂联动逻辑的场景，表单的onChange会在任意字段值变化时触发，我们可以在这里判断哪个字段发生了变化，然后同步更新关联字段。

实现步骤： #

1. 把Redux Form的change action映射到组件props中，这个action用来手动更新表单字段的值。
2. 在reduxForm配置中添加onChange回调，在这里处理联动逻辑。
3. 可以通过mapStateToProps获取当前表单的所有值，用来判断是否需要更新（避免无限循环）。

代码示例： #

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

const LinkedForm = ({ handleSubmit, change, formValues }) => {
  // 表单全局变更处理函数
  const handleFormChange = (updatedValues) => {
    // 假设下拉框name是"selectValue"，单选组name是"radioValue"
    const { selectValue } = updatedValues;
    
    // 只有当下拉框的值和单选框当前值不一致时才更新，避免无限循环
    if (selectValue !== formValues?.radioValue) {
      change('radioValue', selectValue);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 下拉选择框 */}
      <Field name="selectValue" component="select">
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
        <option value="orange">橙子</option>
      </Field>

      {/* 单选按钮组 */}
      <div className="radio-group">
        <Field name="radioValue" component="input" type="radio" value="apple" />
        <label>苹果</label>

        <Field name="radioValue" component="input" type="radio" value="banana" />
        <label>香蕉</label>

        <Field name="radioValue" component="input" type="radio" value="orange" />
        <label>橙子</label>
      </div>

      <button type="submit">提交表单</button>
    </form>
  );
};

// 获取当前表单的所有值，用于判断是否需要更新
const mapStateToProps = (state, ownProps) => ({
  formValues: state.form[ownProps.form]?.values,
});

// 把change action映射到组件props
const mapDispatchToProps = { change };

// 包装表单组件
export default connect(mapStateToProps, mapDispatchToProps)(
  reduxForm({
    form: 'linkedForm', // 表单唯一标识
    onChange: handleFormChange, // 绑定全局变更回调
  })(LinkedForm)
);

方式二：单个Field的onChange回调处理联动 #

如果你只需要特定字段之间的联动，也可以直接在触发联动的Field上绑定onChange回调，在字段值变化时直接更新关联字段。

代码示例： #

// 沿用上面的组件，修改下拉框的Field配置
<Field
  name="selectValue"
  component="select"
  onChange={(event, newValue) => {
    // 直接调用change更新单选字段
    change('radioValue', newValue);
    // 别忘了返回新值，让Redux Form更新当前下拉框的状态
    return newValue;
  }}
>
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</Field>

关键注意事项： #

1. 为什么相同name不生效？
   Redux Form中Field的name是表单状态的唯一标识，多个不同类型的Field（比如下拉框和单选组）用同一个name会导致状态冲突，Redux Form无法正确处理不同组件的输入逻辑，所以这种方式不可行。

2. 避免无限循环
   当你调用change更新字段时，会再次触发表单/字段的onChange回调，所以一定要判断新值和目标字段当前值是否一致，一致就跳过更新。

3. 自定义组件的注意点
   如果你用自定义组件作为Field的component，要确保组件正确传递onChange等props，比如在自定义组件中调用props.onChange(newValue)来通知Redux Form值的变化。

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