为什么反应组件函数返回的输入字段在每个键上都失去焦点

Question

当我在 React 中为 return JSX 输入字段创建函数时，光标在每个键上都失去焦点，这意味着我可以输入一个字符，然后我必须再次单击输入字段要输入另一个角色，有人可以解释发生了什么以及我如何防止这种情况或在反应中这样做是不可取的吗？我的代码：

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 与 return JSX 的其余部分分开，您可以将其作为函数而不是组件来调用。使 const 小写，而不是 <Show></Show> return show()。状态变量将保留在范围内，但它不再是组件，只是 returns JSX 的函数。

否则我建议将它放在 App 函数之外，并通过 props 传入你的状态值和更新器。

为什么反应组件函数返回的输入字段在每个键上都失去焦点

why Input field returned by a react component function goes out of focus on each key

reactjs

react-component

react-functional-component