redux-form Field组件向类组件传递props问题求助

看起来你在redux-form中使用类组件作为Field的component时，遇到了Props传递的问题——函数组件的写法能正常工作，但类组件却拿不到预期的Props。我来帮你理清这里的逻辑，给出正确的实现方式。

首先，先纠正一个常见误区：redux-form的Field组件会把所有自定义Props和它内部生成的input、meta对象合并在一起，传递给你指定的组件。不管是函数组件还是类组件，都是通过单一的Props对象接收这些值，而不是分开的参数。

1. 先修正你的函数组件写法 #

你原来的函数组件写了(props, field)，这其实是错误的，正确的函数组件应该接收一个包含所有内容的Props对象：

const Rfc = (props) => {
  // 从props中解构出redux-form注入的input，以及你自定义的mychange
  const { input, mychange } = props;
  
  return (
    <div>
      <input 
        {...input} 
        type="text" 
        onChange={(e) => {
          // 必须先调用redux-form的input.onChange，否则表单值无法更新
          input.onChange(e);
          // 再执行你的自定义逻辑
          mychange(e);
        }} 
      />
    </div>
  );
};

2. 类组件的正确实现方式 #

类组件同样是从this.props中获取所有值，包括redux-form注入的input、meta和你自定义的Props。比如创建一个类组件版的字段组件：

class RfcClass extends React.Component {
  render() {
    // 从this.props中解构需要的内容
    const { input, mychange } = this.props;
    
    return (
      <div>
        <input 
          {...input} 
          type="text" 
          onChange={(e) => {
            // 先触发redux-form的表单更新逻辑
            input.onChange(e);
            // 再执行自定义的change回调
            mychange(e);
          }} 
        />
      </div>
    );
  }
}

3. 在表单中使用Field传递自定义Props #

在你的MyForm组件中，使用Field时直接传递自定义Props即可，不需要额外传递field参数——redux-form会自动处理注入逻辑：

class MyForm extends React.Component {
  render() {
    return (
      <form>
        <div>
          <Field 
            name="myfield" 
            component={RfcClass} 
            // 直接传递自定义的mychange回调
            mychange={(e) => {
              console.log(e.target.value);
            }} 
          />
        </div>
      </form>
    );
  }
}

关键注意点 #

• 不要忘记调用input.onChange(e)：如果你完全覆盖了onChange而不调用redux-form的内置方法，表单的值将无法被redux-form跟踪和更新。
• 类组件和函数组件的Props接收逻辑一致：都是通过单一的Props对象获取所有内容，区别只是类组件用this.props，函数组件直接接收参数。

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