React Hooks - 输入一个值后失去焦点

Question

每次我输入和更改状态时，我的表单组件输入都会失去焦点，不知道为什么会失去焦点。

这是指向具有相同问题的沙盒的链接 https://codesandbox.io/s/quiet-dew-cf5wr?file=/src/App.js

Answer 1

您是否尝试将 const MotionStack = motion(Stack); 放在 Form 函数之外？

...
+ const MotionStack = motion(Stack);

function Form() {
- const MotionStack = motion(Stack);
  ...
}

我认为这会影响生命周期，因为每次更新状态时都会重新生成。

另一种选择是使用 React.useMemo，以防止重新生成 MotionStack。

const MotionStack = React.useMemo(() => motion(Stack), []);

Answer 2

这已经解决了，我的 Motion div 在组件内部，导致它在每次我输入时都会重新渲染。我只是把它移出了函数。