自定义日期组件Enter键聚焦失效求助（useRef+Chakra UI）

核心原因分析 #

1. forwardRef未正确绑定到内部可聚焦元素：你虽然用了forwardRef包裹DateComponent，但如果没把外部传入的ref传递给组件内部的<Input>标签，ref.current自然会是null。
2. 硬编码跳转目标逻辑错误：当前handleKeyPress里固定跳转到ref2，不仅不符合“按Enter依次跳转”的需求，还可能在组件未完全挂载时调用focus()导致报错。

分步解决方案 #

1. 修复DateComponent的forwardRef实现 #

确保把外部传入的ref绑定到内部的Chakra UI <Input>上，这是ref能获取到DOM元素的关键：

import { forwardRef } from 'react';
import { Input, FormLabel, Box } from '@chakra-ui/react';

// 用forwardRef接收外部ref，并传递给内部Input
const DateComponent = forwardRef(({ label, ...props }, ref) => {
  return (
    <Box mb={2}>
      <FormLabel htmlFor="date-input">{label}</FormLabel>
      {/* 把ref绑定到可聚焦的Input元素上 */}
      <Input id="date-input" ref={ref} {...props} />
    </Box>
  );
});

// 必须设置displayName，避免React DevTools显示异常
DateComponent.displayName = 'DateComponent';

export default DateComponent;

2. 优化Enter键跳转逻辑 #

把refs存入数组，根据当前组件的索引找到下一个目标，同时增加空值判断避免报错：

import { useRef } from 'react';
import { Box } from '@chakra-ui/react';
import DateComponent from './DateComponent';

const DateInputGroup = () => {
  // 定义三个ref
  const ref1 = useRef(null);
  const ref2 = useRef(null);
  const ref3 = useRef(null);
  // 存入数组方便索引查找
  const inputRefs = [ref1, ref2, ref3];

  const handleEnterKey = (event, currentIndex) => {
    if (event.key !== 'Enter') return;
    
    event.preventDefault(); // 阻止Enter默认行为（比如表单提交）
    // 计算下一个索引，循环跳转可选
    const nextIndex = (currentIndex + 1) % inputRefs.length;
    const nextInput = inputRefs[nextIndex].current;
    
    // 确保目标元素存在再聚焦
    if (nextInput) {
      nextInput.focus();
    }
  };

  return (
    <Box p={4}>
      <DateComponent 
        label="起始日期" 
        ref={ref1} 
        onKeyDown={(e) => handleEnterKey(e, 0)} 
      />
      <DateComponent 
        label="中间日期" 
        ref={ref2} 
        onKeyDown={(e) => handleEnterKey(e, 1)} 
      />
      <DateComponent 
        label="结束日期" 
        ref={ref3} 
        onKeyDown={(e) => handleEnterKey(e, 2)} 
      />
    </Box>
  );
};

export default DateInputGroup;

额外注意事项 #

• 用onKeyDown替代onKeyPress：onKeyPress在部分浏览器对Enter键的支持不如onKeyDown稳定。
• 空值判断：组件挂载完成前ref.current会是null，必须先判断再调用focus()。
• displayName设置：使用forwardRef时必须给组件设置displayName，否则React DevTools中组件名称会显示异常。

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