React中input的selectionStart设置无效问题排查

这不是React不能使用原生JS的问题，核心原因是你把ID绑定到了div上，而非目标input元素。

问题拆解 #

• 你的useEffect代码里，通过getElementById("date-of-birth-input")获取的是div元素，而div本身没有selectionStart和selectionEnd属性，所以设置光标位置的操作完全无效。
• 点击事件代码能成功，是因为e.target指向的是实际被点击的input元素——input原生支持光标位置相关属性，所以操作生效。

修复方案 #

方案1：修正ID绑定位置

把ID直接绑定到input上，确保原生API能获取到正确元素：

<div>
  <input type="text" id="date-of-birth-input" />
</div>

方案2：使用React推荐的useRef方式（更符合组件范式）

避免直接操作DOM，用useRef获取input元素：

import { useEffect, useRef } from 'react';

// 组件内定义ref
const dateOfBirthInputRef = useRef<HTMLInputElement>(null);

// 修正后的useEffect逻辑
useEffect(() => {
  if (dateOfBirthInputRef.current) {
    const dataLength = dateOfBirth.length;
    dateOfBirthInputRef.current.selectionStart = dataLength;
    dateOfBirthInputRef.current.selectionEnd = dataLength;
  }
}, [dateOfBirth]);

// 对应DOM结构
<div>
  <input type="text" ref={dateOfBirthInputRef} />
</div>

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