React使用refs数组实现输入框回车跳转及forwardRef适配问题

核心调整点 #

• 用forwardRef封装自定义Input组件，将外部传入的ref绑定到组件内部的原生input元素上，确保外部可以直接调用focus()方法
• 修正refs数组的创建逻辑（原fill写法会复用同一个ref实例，需改用map生成独立ref）
• 透传键盘事件到自定义组件内部，保留原有的回车跳转逻辑

完整代码示例 #

首先是自定义Input组件的实现：

import { forwardRef } from 'react';

// 用forwardRef接收外部传入的ref
const CustomInput = forwardRef((props, ref) => {
  return (
    <input
      // 将外部ref绑定到原生input上
      ref={ref}
      type="text"
      // 透传所有外部传入的属性，包括placeholder、onKeyPress等
      {...props}
      // 可自定义组件样式
      style={{ margin: '0 8px 8px 0' }}
    />
  )
});
// 给组件设置displayName方便调试
CustomInput.displayName = 'CustomInput';

然后是Step1组件的调整：

import { createRef } from 'react';
// 引入自定义Input
import CustomInput from './CustomInput';

// 生成5个独立的ref，不可直接用fill填充createRef，会复用同一个实例
const array = new Array(5).fill(null).map(() => createRef());

const Step1 = () => {
    const handleSubmit = (e) => {
        e.preventDefault();
        console.log("表单提交");
        // 补充你的表单提交逻辑
    }

    return (
        <>
           <form style={{margin:30}} onSubmit={handleSubmit}>
                {array.map((item, index) => {
                    return (
                        <CustomInput
                            key={index}
                            ref={item}
                            placeholder={`Input ${index + 1}`}
                            onKeyPress={(e) => {
                                if (e.key === "Enter") {
                                    e.preventDefault();
                                    // 存在下一个输入框则跳转聚焦
                                    if (array[index + 1]) {
                                        array[index + 1].current.focus();
                                    } else {
                                        // 没有下一个则触发表单提交
                                        e.target.form.dispatchEvent(new Event('submit', { cancelable: true }));
                                    }
                                }
                            }}
                        />
                    );
                })}
                <button type="submit">Submit</button> 
           </form>
        </>
    )
}

export default Step1;

注意事项 #

• 自定义组件必须通过forwardRef把ref绑定到内部的原生可聚焦元素上，否则调用focus()方法会失效
• 回车事件触发时要先调用e.preventDefault()，避免浏览器默认的表单提交行为
• 如果自定义Input内部封装了更复杂的结构，需要确保暴露的focus方法指向内部输入框，也可以通过useImperativeHandle自定义暴露的方法

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