Redux Form中首个输入框自动聚焦失效，如何实现每次自动聚焦？

你遇到的问题很典型：Redux-Form的Field组件不会自动把自定义的autoFocus属性传递给内部的input元素——你的renderField组件只解构了input对象的属性，而autoFocus属于Field的额外props，并没有被包含在input参数里，所以input根本没拿到这个属性，自然不会触发自动聚焦。

下面给你两种可靠的解决方案：

方案一：手动传递autoFocus到input元素 #

修改你的renderField组件，显式接收autoFocus参数并绑定到input上：

// 调整renderField，新增autoFocus参数
const renderField = ({ 
  input, 
  label, 
  type, 
  autoFocus, // 接收Field组件传入的autoFocus
  meta: { touched, error, warning } 
}) => (
  <div>
    <div className="group">
      {/* 将autoFocus绑定到input元素 */}
      <input className="text" {...input} type={type} autoFocus={autoFocus}/>
      <label>{label}</label>
      <span className="highlight"></span>
      <span className="bar"></span>
      {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
    </div>
  </div>
)

// 保留Field上的autoFocus属性，同时修正拼写错误：require → required
<Field 
  name="name" 
  type="text" 
  component={renderField} 
  label="Username" 
  autoFocus 
  required
/>
<Field 
  name="email" 
  type="email" 
  component={renderField} 
  label="Email" 
  required
/>

方案二：使用Redux-Form的focus Action（更稳定） #

如果你的表单存在动态渲染、重新挂载的场景，方案一可能不会重复触发聚焦。这时可以用Redux-Form提供的focus action，主动指定要聚焦的字段：

import { focus, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import { useEffect } from 'react';

const YourForm = ({ dispatch }) => {
  useEffect(() => {
    // 第一个参数是你的表单名称（reduxForm配置时的form属性），第二个是要聚焦的字段名
    dispatch(focus('yourFormName', 'name'));
  }, [dispatch]);

  return (
    <form>
      <Field 
        name="name" 
        type="text" 
        component={renderField} 
        label="Username" 
        required
      />
      <Field 
        name="email" 
        type="email" 
        component={renderField} 
        label="Email" 
        required
      />
    </form>
  );
};

// 配置reduxForm时记得指定表单名称
const WrappedForm = reduxForm({
  form: 'yourFormName' // 这里的名称要和focus action里的第一个参数一致
})(YourForm);

export default connect()(WrappedForm);

两种方案对比：方案一简单直接，适合静态表单；方案二更灵活，能应对表单重新渲染的场景，确保每次都能聚焦到目标字段。另外注意你代码里的require是拼写错误，应该是required哦。

内容的提问来源于stack exchange，提问作者Piotr 呕ak