如何让MUI TextField组件autoFocus时光标定位到文本末尾？

有可行的实现方案，核心是通过useRef获取原生输入框元素，结合useEffect在组件挂载完成后手动控制光标位置，同时避免和autoFocus属性冲突。

基础实现（仅组件挂载时生效） #

直接替换你的初始代码即可：

import React, { useState, useRef, useEffect } from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';

export default function BasicTextFields() {
  const [value, setValue] = React.useState(
    "hello world. hello world. hello world"
  );
  const inputRef = useRef(null);

  useEffect(() => {
    const inputElement = inputRef.current;
    if (inputElement) {
      // 聚焦输入框
      inputElement.focus();
      // 将光标定位到文本末尾
      const textLength = inputElement.value.length;
      inputElement.setSelectionRange(textLength, textLength);
    }
  }, []); // 空依赖确保只在组件挂载时执行一次

  return (
    <Box
      component="form"
      sx={{
        "& > :not(style)": { m: 1, width: "25ch" }
      }}
      noValidate
      autoComplete="off"
    >
      <TextField
        id="outlined-basic"
        variant="outlined"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        multiline
        inputRef={inputRef} // 绑定原生输入框的ref
      />
    </Box>
  );
}

进阶实现（值更新后也自动定位到末尾） #

如果需要在value动态更新时，光标也自动跳到末尾，只需把value加入useEffect的依赖数组：

useEffect(() => {
  const inputElement = inputRef.current;
  if (inputElement) {
    inputElement.focus();
    const textLength = inputElement.value.length;
    inputElement.setSelectionRange(textLength, textLength);
  }
}, [value]); // value变化时重新执行光标定位

之前方案无效的原因 #

原代码中autoFocus属性和手动调用的input.focus()触发时序冲突，导致setSelectionRange执行时，DOM元素的状态还未稳定，最终光标定位失效。而useEffect会在组件挂载/更新完成后执行，能确保DOM元素已完全就绪，避免这类时序问题。

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