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

Question

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

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

Answer 1

你有没有尝试把const MotionStack = motion(Stack);表单功能放在外面？

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

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

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

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

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

Answer 2

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