React受控组件

Question

import React, { useState } from "react";
function App() {
const [name, setName] = useState("");
const [headingText, setHeadingText] = useState("");
function handleChange(event) {
// console.log(event.target.value);
setName(event.target.value);
}
function handleClick(event) {
setHeadingText(name);
//after everything is done
event.preventDefault();
}
return (
<div className="container">
<h1>Hello {headingText}</h1>
<form onSubmit={handleClick}>
<input
onChange={handleChange}
type="text"
placeholder="What's your name?"
value={name}
/>
<button type="submit">Submit</button>
</form>
</div>
);
}
export default App;

我将使用上面的代码来询问我的问题。input元素通过用户输入(value属性(处理其状态更改，但react使用状态变量来处理状态更改。为了有一个常数值，我们设置了反应变量来处理形式元素的状态变化。

value={name}

但是，如果我们这样做，然后访问用户通过event.target.value输入的值，它如何能够跟踪用户在输入字段中输入的内容，因为我们设置了value={name}。event.target.value不应该给我们名称变量的值，而不是用户输入吗

Answer 1

我是这样想的。

CCD_ 1是输入元件的外部状态。在React术语中，它是道具。

CCD_ 2来自用户按键后CCD_ 3元素的内部状态。从反应的角度来说，这是一种状态。

因此，您可以根据用户输入更改内部状态。它是event.target.value

当父组件重新调用时，您可以设置输入元素的prop。是value={name}

Answer 2

答案是react是单向数据流。它不像angularjs或Angular[(ngModel)]那样双向绑定。这意味着内部DOM元素状态更新在组件重新渲染之前不会生效，并且在组件状态更改之前组件不会重新渲染。因此，输入中的值不是"0"；设置"；通过反应直到状态改变。您可以随心所欲地修改输入中的值，并且react在触发onChange处理程序(然后更新状态(之前不会执行任何操作。只有然后才会重新渲染组件并将新值放入输入框中。

在重新渲染发生之前，<input>元素的react状态和内部状态不同步。event.target.value读取输入元素的内部状态，而value={name}0读取App组件上name属性的值。当组件被重新渲染时，这两者会重新同步。