使用React钩子时更新表单域

要引起重新渲染,必须调用setState。在您的情况下,不直接编辑状态值,您应该使用旧状态将整个用户状态更新为新状态。

function handleChange(event) {
    user[event.nativeEvent.target.name] = event.target.value; // instead of doing this
    // do this
    let newUserObject = Object.assign({}, user, {
        [event.nativeEvent.target.name]: event.target.value
    })
    setUser(newUserObject)
}

setName 每次用户在输入中键入内容时,on change都会导致重新呈现。但是React使用了一种称为virtualdom的方法,过滤DOM上由于状态变化而更新的内容,并且只更新DOM上所需的部分,这是非常有效的。

据我所知,你的车没有毛病 NameForm 组件,并使用 useState 钩子正在做它想要做的事情:这就是重新渲染 input 当值发生变化时。这将确保组件的状态随着用户在输入上的类型而更新。