0 
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 元素通过用户输入（值属性）处理其状态更改，但 react 使用状态变量来处理状态更改。为了有一个常数值，我们也设置了 react 变量来处理表单元素的状态变化。

value={name}

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

4

2 回答 2

0

我是这样想的。

value={name}是输入元素的外部状态。在 React 术语中，它是道具。

并且event.target.value来自input用户按键发生后元素的内部状态。在反应方面，它是一种状态。

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

并且在父组件重新渲染时设置输入元素的道具。它是value={name}

于 2021-05-21T19:14:13.190 回答
0

答案是反应是一种数据流方式。它不像 angularjs 或 Angular 那样双向绑定[(ngModel)]。这意味着内部 DOM 元素状态更新在组件重新渲染之前不会生效 - 并且组件在组件状态更改之前不会重新渲染。因此，在状态改变之前，输入中的值不会被反应“设置”。您可以根据需要修改输入中的值，并且在onChange触发更新状态的处理程序之前，react 不会做任何事情。只有这样它才会重新渲染组件并将新值放入输入框中。

在重新渲染发生之前，反应状态和<input>元素的内部状态是不同步的。event.target.value读回输入元素的内部状态，而{name}在本例中为 App 组件读回 name 属性的值。当组件重新渲染时，两者会重新同步。

于 2021-05-21T18:44:56.910 回答