Redux-form表单onChange事件在自定义Field组件下未触发求助

嘿，我之前也碰到过几乎一模一样的问题，这真不是redux-form的bug，是咱们自定义Field组件的时候没处理好状态同步导致的～

本质原因是：表单级别的onChange事件，是依赖于redux-form感知到字段值已经同步到它维护的表单状态后才会触发的。普通input字段能正常触发，是因为redux-form自带的input组件已经帮咱们封装好了input.onChange的调用逻辑，而自定义组件如果没做这一步，redux-form根本不知道这个字段的值变了，自然不会触发表单的onChange。

给你几个具体的解决思路：

1. 自定义组件必须调用redux-form传递的input.onChange #

redux-form会给每个Field组件传递一个input对象，里面包含onChange、value、onBlur等核心方法。自定义组件内部的输入变更事件，必须调用这个input.onChange来同步值到redux-form的状态中。

举个自定义下拉选择框的例子：

const CustomSelect = ({ input, options }) => {
  return (
    <select
      value={input.value}
      // 关键：触发redux-form的onChange同步状态
      onChange={(e) => input.onChange(e.target.value)}
      // 可选但建议处理：同步失去焦点状态
      onBlur={input.onBlur}
    >
      {options.map(opt => (
        <option key={opt.value} value={opt.value}>{opt.label}</option>
      ))}
    </select>
  );
};

2. 带内部状态的自定义组件要同步调用input.onChange #

如果你的自定义组件需要维护内部状态（比如做一些本地的输入校验、格式转换），一定要在内部状态更新后立刻调用input.onChange，把最终值同步给redux-form：

const CustomNumberInput = ({ input }) => {
  const [localValue, setLocalValue] = useState(input.value || '');

  const handleLocalChange = (e) => {
    const rawValue = e.target.value;
    // 本地只允许输入数字
    const filteredValue = rawValue.replace(/[^0-9]/g, '');
    setLocalValue(filteredValue);
    // 同步处理后的值到redux-form
    input.onChange(filteredValue);
  };

  return (
    <input
      type="text"
      value={localValue}
      onChange={handleLocalChange}
      onBlur={input.onBlur}
    />
  );
};

3. 检查Field组件的使用方式 #

确保你在使用Field时，正确把自定义组件传给了component或render属性，比如：

<Field
  name="priceRange"
  component={CustomNumberInput}
/>

按照上面的方式调整后，自定义Field的变更就能正常触发表单级别的onChange，你在这个事件里调用handleSubmit发请求的逻辑也就正常工作了。

内容的提问来源于stack exchange，提问作者Ludvík Adamec