删除第二行后如何将焦点恢复至第一个TextField？

我在代码里给第一个TextField加了autoFocus，首次渲染能正常获焦，但按Tab切到第二个Del按钮点击删除第二行后，焦点就丢了。试过用ref但没生效，怎么实现删除后焦点回到第一个TextField？

问题原因 #

• autoFocus仅在组件首次挂载时触发，删除第二行时第一个TextField已经存在，不会重新挂载，所以autoFocus不会再次生效。
• 之前的ref代码只是给TextField绑定了引用，但没有在状态变化后主动调用焦点方法，因此没达到预期效果。

解决方法 #

使用useEffect监听第二行的状态（b），当b从true变为false（即第二行被删除）时，手动调用第一个TextField的焦点方法。

修改后的代码 #

import React, { useState, useRef, useEffect } from "react";
import ReactDOM from "react-dom"
import { TextField, Button, Paper } from "@mui/material"

function App() {
  const [a, setA] = useState(true)
  const [b, setB] = useState(true)
  const firstInputRef = useRef(null)

  // 监听b的状态变化，删除第二行时聚焦第一个输入框
  useEffect(() => {
    if (!b && firstInputRef.current) {
      firstInputRef.current.focus()
    }
  }, [b])

  return (
    <Paper>
      {a && <div> 
        <TextField ref={firstInputRef} autoFocus />
        <Button onClick={() => setA(!a)}> Del </Button>
      </div>}
      {b && <div>
        <TextField />
        <Button onClick={() => setB(!b)}> Del </Button>
      </div>}
      <Button onClick={() => { setA(true); setB(true) }}>Reset</Button>
    </Paper>
  );
}

关键说明 #

• useEffect的依赖数组设为[b]，确保只有当b的值变化时才执行回调逻辑。
• 当第二行被删除（b变为false）且ref引用存在时，调用focus()方法让第一个输入框重新获取焦点。
• 如果直接用组件ref不生效，可改用inputRef直接获取底层input元素，替换为<TextField inputRef={firstInputRef} />，后续焦点调用逻辑不变。

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