为什么react组件函数返回的输入字段在每个键上都会失焦？

Question

当我在react中创建一个函数来返回一个JSX输入字段时，光标在每个键上都失去了焦点，这意味着我可以输入一个字符，然后我必须再次点击输入字段来输入另一个字符，谁能解释一下这是怎么回事，我如何能防止这种情况发生，或者在react中这样做是不可取的？ 我的代码。

import React, {useState} from 'react';

export default function App(props) {
   const [value, setValue] = useState();

   const Show = () => {
     return (
        <div>
            <input type="text" name="name" value={value} onChange={(e) => setValue(e.target.value)}/>
        </div>
    )
  }



   return (
       <Show></Show>
   );
}

Answer 1

因为你在函数中定义了一个组件。

因为你在一个函数中定义了一个组件。App 重新渲染，它实际上是一个新的函数调用。这意味着 Show 被重新定义。它被完全摧毁和重新创造。其结果是，每一次重新渲染。<Show/> 被重新安装。元件重新安装时，输入将失去焦点。

请勿 在其他组件中声明组件。没有好处，只有弊端。

假设你的实际用例确实有理由分离出 input 的其余部分，你可以把它作为一个函数而不是一个组件来调用。把const改成小写，并且用 <Show></Show> 返回 show(). 状态变量将保留在范围内，但它将不再是一个组件，只是一个返回JSX的函数。

否则我建议把它放在 App 函数，并通过道具传入你的状态值和更新器。