虽然 Kais 的回答可以解决症状，但它不会解决问题的原因。如果有多个输入，它也会失败 - 那么哪个应该自动聚焦于重新渲染？

当您FormComponent在另一个函数的作用域内定义一个组件 ( )时会发生问题，该函数在您的App组件的每个渲染中都被调用。这给你一个全新的FormComponent你每次App组件重新呈现和电话useState。那么，那个新组件就没有焦点了。

就我个人而言，我会再次从钩子中返回组件。我会改为定义一个FormComponent组件，并且只从 useForm 状态返回状态。

但是，最接近原始代码的工作示例可能是：

// useForm.js
import React, { useState } from "react";

// Define the FormComponent outside of your useForm hook
const FormComponent = ({ setState, state, label }) => (
  <form>
    <label htmlFor={label}>
      {label}
      <input
        type="text"
        id={label}
        value={state}
        placeholder={label}
        onChange={e => setState(e.target.value)}
      />
    </label>
  </form>
);

export default function useForm(defaultState, label) {
  const [state, setState] = useState(defaultState);

  return [
    state,
    <FormComponent state={state} setState={setState} label={label} />,
    setState
  ];
}

// App.js
import useForm from "./useForm";

export default function App() {
  const [formValue, Form] = useForm("San Francisco, CA", "Location");

  return (
    <>
      <h1>{formValue}</h1>
      {Form}
    </>
  );
}

这是一个沙箱

当您在输入框中输入任何文本时。父组件也在重新渲染。所以你需要手动关注输入。为此，autoFocus在输入标签中使用

<input
  type="text"
  id={label}
  value={state}
  placeholder={label}
  onChange={e => setState(e.target.value)}
  autoFocus
/>

第一个解决方案实际上对我有用，最初包含文本字段的功能组件是主要功能组件的一部分，我面临同样的问题，但是当我将文本字段组件提取到另一个页面并将其导入时，它工作正常是我的组成部分

 <Paper >
      <div>
      <div style={{padding:'10px' ,display:'flex'}}  >       
      <inputstyle={{marginRight:'5px'}} value={val} onChange={(e)=>{setVal(e.target.value)}} />             
    </div>
    </div>
    </Paper>

以上答案对我不起作用。对我有用的解决方案要简单得多，因此也不那么明显。

问题 本质上，我随输入更改的值也用于key输入列表中的每个值。

因此，当我更新值时key，它会改变，React 会检测到它与最后一个键不同，并在它的位置创建一个新输入。作为一个新的输入，它不会专注于自己。

但是，通过使用autoFocus它会自动关注新创建的输入。但问题并没有解决，因为很明显，输入不断地经历着一个不聚焦和聚焦的循环。

这是一篇演示该问题的文章。

修复

将 更新key为不可更改的值，以便 React 对列表项有一个稳定的引用。就我而言，我只是将其更新为索引。这并不理想（React 文档建议使用稳定的 ID），但在我的情况下这没问题，因为项目的顺序不会改变。