Redux Form中HandleChange()内下拉选特定值时重置文本框问题

报错根因 #

redux-form/lib/change could not be resolved是导入路径错误导致的：redux-form/lib/*属于框架内部文件路径，不属于公开API，版本迭代时随时可能调整，直接引用必然会出现找不到模块的问题。

正确实现步骤 #

1. 修正action导入方式 #

所有redux-form提供的公开方法、组件统一从包根路径导入，v6/v7/v8主流版本通用写法：

import { change } from 'redux-form';

2. 下拉选值触发文本框重置 #

两种常用实现方案，按需选择即可：

方案1：onChange回调主动dispatch（适合带额外副作用的场景）

change方法的参数顺序为change(表单名, 目标字段名, 重置后的值)，在下拉框的变更回调中判断选中值，符合条件时dispatch该action即可。
完整示例：

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

// 下拉框渲染组件
const SelectField = ({ input, customOnChange, ...rest }) => (
  <select
    {...input}
    {...rest}
    onChange={e => {
      input.onChange(e) // 必须先调用默认逻辑，更新下拉框自身的值
      customOnChange?.(e.target.value)
    }}
  />
)

// 文本框渲染组件
const TextField = ({ input, ...rest }) => <input type="text" {...input} {...rest} />

const DemoForm = ({ handleSubmit, dispatch }) => {
  // 这里的表单名必须和reduxForm注册时的form字段完全一致
  const FORM_NAME = 'demoForm'

  const handleSelectChange = (selectedVal) => {
    // 比如选中值为'reset_trigger'时，重置名为'desc'的文本框
    if (selectedVal === 'reset_trigger') {
      // 第三个参数传重置后的目标值，一般传空串、undefined或者字段初始值
      dispatch(change(FORM_NAME, 'desc', ''))
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>类型选择</label>
        <Field
          name="type"
          component={SelectField}
          customOnChange={handleSelectChange}
        >
          <option value="">请选择</option>
          <option value="normal">普通类型</option>
          <option value="reset_trigger">重置文本类型</option>
        </Field>
      </div>
      <div>
        <label>描述文本</label>
        <Field name="desc" component={TextField} />
      </div>
      <button type="submit">提交</button>
    </form>
  )
}

export default reduxForm({
  form: 'demoForm'
})(DemoForm)

方案2：normalize字段规则（更推荐，无额外样板代码）

如果重置逻辑仅和表单内字段值关联，没有其他外部副作用，可以直接用redux-form自带的normalize能力，不需要手动导入action、写dispatch逻辑，框架会在关联字段变更时自动计算当前字段值：

<Field
  name="desc"
  component={TextField}
  normalize={(currentVal, prevVal, allFormValues) => {
    // 当下拉框选中触发重置的值时，直接返回空作为文本框的新值
    if (allFormValues.type === 'reset_trigger') return ''
    return currentVal
  }}
/>

注意事项 #

• 禁止直接引用redux-form/lib下的任何内部模块，所有公开API都从包根路径导入，避免版本升级导致的路径错误。
• 调用change方法时第一个参数必须和reduxForm注册的form名称完全一致，否则action无法匹配到目标表单，修改不会生效。
• 如果在表单组件外部调用change方法，需要确保目标表单已经处于挂载状态，否则修改不会生效。

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