<form> элемент в React не работает так, как я ожидал

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 не рендерится, когда он находится вне приложения, и почему элементы неповторно визуализируется, когда они находятся прямо внутри приложения?

React эффективно обновляет DOM, изменяя только вещи, которые отличаются, но не идеальны. Он сравнивает компоненты с === и, если они не совпадают, удаляется все дерево.

Поскольку вы воссоздаете AddForm при каждом рендеринге, текущий AddFrom не равен предыдущему AddFrom. Это заставляет React удалить form, связанный с AddForm, и создать еще один вместо него.

Когда вы помещаете AddForm снаружи, ток AddForm равен предыдущему AddForm, поэтому React просто сравниваетвозвращает значения предыдущего и текущего AddForm и обновляет DOM, связанный с AddForm (то есть просто добавляет еще один символ в поле ввода)