我在另一个组件中定义了一个带有输入框的子组件。为什么子组件输入时失去焦点？

Question

我在父组件中定义了一个子组件，并使用 JSX 来渲染它。但是，子组件中的输入框在键入时会失去焦点。为什么会出现这种情况？

import { useState } from 'react';

function App () {
  const [text, setText] = useState('');
  const handleChange = (event) => {
    setText(event.target.value);
  };
  const Input = () => (<input value={text} onChange={handleChange} />)
  return (
    <div className="App">
      <Input />
    </div>
  );
}

export default App;

我想知道是什么原因导致这种现象。

Answer 1

如此新的写作方式我以前从未想过。

肯定是因为重新渲染了，但是它的工作原理可能需要阅读react源码。