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

Question

I'm trying to create a form element where the user can enter input. If I insert the form element directly, everything works fine when typing the letters. If I insert the form element via AddForm component, I can only type one letter and have to click into the field again to enter the next letter.

Why is that?

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 function is created on every render so from React perspective AddForm is a different component causing the related DOM elements getting recreated which makes it look like the input element lost its focus.

Move AddForm outside of App (and pass required data into it through props).

---

why is AddForm not re-rendered when it is outside App and why are the elements not re-rendered when they are directly inside App?

React updates the DOM in an effective way, only changing things that are different but it's not perfect. It compares components with === and if they don't match, the whole tree is removed.

Since you recreate AddForm on every render, current AddFrom is not equal to previous AddFrom . This makes React remove the form associated with AddForm and create another one in its place.

When you put AddForm outside, current AddForm is equal to previous AddForm so React just compares the return values of previous and current AddForm and updates the DOM associated with AddForm (that is, just adds another char to the input field)