React 基础 - 更新 var 并在渲染中使用它不起作用

Question

ReactJS 新手，有 android 经验我只是在输入更改时将一个值设置为变量并在显示中使用它但是输入冻结并且新值也没有应用我还在 render 函数之外声明了 var msg，所以它不会每次都被初始化这当然不是反应的工作方式，我犯了一个微不足道的错误，但它可能是如此微不足道，以至于没有答案我究竟做错了什么import React, { useState } from "react";import ReactDOM from "react-dom";import "./styles.css";var msg = "initial value";const Message = () => {  return (    <div>      <input        type="text"        value={msg}        placeholder="Enter a message"        onChange={(e) => {          alert(e.target.value);          msg = e.target.value;        }}      />      <p>        <strong>{msg}</strong>      </p>    </div>  );};const rootElement = document.getElementById("root");ReactDOM.render(<Message />, rootElement);这是现场演示的链接https://codesandbox.io/s/usestate-01-forked-f2vdq?file=/src/index.js:0-543

Answer 1

React 不会跟踪你的变量，所以你永远不会看到更新。您需要使用组件状态，这将使 React 意识到它并在它发生变化时触发渲染。我已经更新了您的代码以使用挂钩useState：

import React, { useState } from "react";

import ReactDOM from "react-dom";

import "./styles.css";

var msg = "initial value";

const Message = () => {

  const [message, setMessage] = useState(msg);

  return (

    <div>

      <input

        type="text"

        value={message}

        placeholder="Enter a message"

        onChange={(e) => {

          alert(e.target.value);

          setMesage(e.target.value);

        }}

      />

      <p>

        <strong>{msg}</strong>

      </p>

    </div>

  );

};

const rootElement = document.getElementById("root");

ReactDOM.render(<Message />, rootElement);

我们根据msg值设置初始内部状态，然后在更改时更新该内部状态，这将导致重新渲染

Answer 2

没有任何东西告诉 React 它需要重新渲染组件。

变量已更改，但它没有监视变量。

这就是状态的目的。更改状态明确地通知 React 它需要检查 DOM 中是否应该更新任何内容。使用状态挂钩定义变量。

const Message = () => {

  let [msg, setMsg] = useState("initial value");

  return (

    <div>

      <input

        type="text"

        value={msg}

        placeholder="Enter a message"

        onChange={(e) => {

          alert(e.target.value);

          setMsg(e.target.value);

        }}

      />

      <p>

        <strong>{msg}</strong>

      </p>

    </div>

  );

};

Answer 3

通常，变量只包含在使用它们的类中，而不是创建一个全局变量。 

状态是一个数据对象，它包含该类的实例需要使用的任何内容。您有一个message组件，因此，如果我们让它在其状态中存储一条消息，则该消息值将在函数中的任何地方使用，render()无论何时使用。所以，我们可以做value={this.state.msg}，以及<h1>{this.state.msg}</h1>。 状态和组件生命周期是良好 ReactJS 开发的关键。

正如我们所说，React 是有状态的。如果你 put value="hello!"，它对 ReactJS 来说和 put 是一样的<h1>hello!</h1>。除非状态说因为调用而改变setState()，ReactJS 认为显示中的任何内容都没有理由改变。只有通过value={this.state...}并且<h1>{this.state....}</h1>我们才能使任何事物充满活力。

如果您创建这样的状态，请注意我们正在设置默认值...

constructor(props) {

  super(props);

  this.state = {'msg':'Initial Message'};

}

然后在你的输入中，你可以显示它，比如......

<input

    type="text"

    value={this.state.msg}

还有在价值的展示上，比如...

<strong>{this.state.msg}</strong>