Reactjs 反应控制元件

但是，如果我们这样做，然后通过event.target.value访问用户输入的值，它如何能够跟踪用户在输入字段中输入的内容，因为我们已经设置了value={name}。不应该使用event.target.value为我们提供name变量的值，而不是用户输入的值。答案是react是单向数据流。它不像angularjs或Angular

[（ngModel）]

那样是双向绑定的。这意味着内部DOM元素状态更新在重新呈现组件之前不会生效，并且在更改组件状态之前，组件不会重新呈现。因此，在状态改变之前，react不会“设置”输入中的值。您可以随意修改输入中的值，在触发更新状态的

onChange

处理程序之前，react不会做任何事情。只有这样，它才会重新渲染组件并将新值放入输入框中

在重新渲染之前，

元素的反应状态和内部状态不同步

event.target.value

读回输入元素的内部状态，而

{name}

读回在本例中的应用程序组件上的name属性的值。当组件被重新渲染时，两者会重新同步。

我这样认为

value={name}

是输入元素的外部状态。从长远来看，这是道具

而

event.target.value

则来自用户按键后

input

元素的内部状态。就反应而言，这是一种状态

因此，您可以从用户输入更改内部状态。它是

event.target.value

---

当父组件重新渲染时，可以设置输入元素的属性。它的

value={name}

不是与input.value和input.value={name}相同的event.target.value。我仍然不能理解当我们输入时我们改变了input.value，但是我们已经设置了input.value={name}它是如何在按键上更新的，因为我们已经将input-value设置为{name}@rv7组件状态与HTML元素的本地状态不同。当呈现组件时，组件状态将设置本地HTML元素状态，否则您可以自由更改本地状态。这两者并不像在Angular中使用

[（ngModel）]

时那样始终保持同步。

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;

value={name}