React 中的 <form> 元素不像我期望的那样工作

Question

我正在尝试创建一个表单元素，用户可以在其中输入内容。 如果我直接插入表单元素，输入字母时一切正常。 如果我通过AddForm 组件插入表单元素，我只能输入一个字母，并且必须再次单击该字段才能输入下一个字母。

这是为什么呢？

import ReactDOM from 'react-dom';
import React, { useState } from 'react'

const App = () => {

    const [newName, setName] = useState("")
    const [newNumber, setNumber] = useState("")

    const handleName = (event) => {
        setName(event.target.value)
    }

    //doesn't work the way I expect it to
    const AddForm = () => {
        return (
            <form>
                name: <input value={newName} onChange={e => setName(e.target.value)} />
                <div><button type="submit">add</button></div>
            </form>

        )
    }

    return (
        <div>
            <AddForm />
            //does work
            <form>
                name: <input value={newName} onChange={handleName} />
                <div><button type="submit">add</button></div>
            </form>
        </div>
    )
}

ReactDOM.render(<App />, document.getElementById('root'));

Answer 1

AddForm 函数是在每次渲染时创建的，因此从React 的角度来看，AddForm 是一个不同的组件，导致相关的 DOM 元素被重新创建，这使得它看起来像输入元素失去了焦点。

将AddForm 移到App 之外（并通过道具将所需的数据传递到其中）。

---

为什么AddForm在App外不重新渲染，为什么元素直接在App内部不重新渲染？

React 以有效的方式更新 DOM，只改变了不同但并不完美的东西。它将组件与=== 进行比较，如果它们不匹配，则删除整个树。

由于您在每次渲染时都重新创建 AddForm，因此当前的 AddFrom 不等于之前的 AddFrom。这使得 React 删除了与 AddForm 关联的 form 并在其位置创建另一个。

当你把AddForm放在外面时，当前AddForm等于前一个AddForm，所以React只是比较前一个和当前AddForm的返回值，并更新与AddForm关联的DOM（也就是说，只是向输入字段添加另一个字符）