第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

React 基礎(chǔ) - 更新 var 并在渲染中使用它不起作用

React 基礎(chǔ) - 更新 var 并在渲染中使用它不起作用

MMTTMM 2023-05-11 09:59:12
ReactJS 新手，有 android 經(jīng)驗我只是在輸入更改時將一個值設(shè)置為變量并在顯示中使用它但是輸入凍結(jié)并且新值也沒有應(yīng)用我還在 render 函數(shù)之外聲明了 var msg，所以它不會每次都被初始化這當(dāng)然不是反應(yīng)的工作方式，我犯了一個微不足道的錯誤，但它可能是如此微不足道，以至于沒有答案我究竟做錯了什么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);這是現(xiàn)場演示的鏈接https://codesandbox.io/s/usestate-01-forked-f2vdq?file=/src/index.js:0-543
查看完整描述

3 回答

?
藍(lán)山帝景

TA貢獻(xiàn)1843條經(jīng)驗 獲得超7個贊

React 不會跟蹤你的變量，所以你永遠(yuǎn)不會看到更新。您需要使用組件狀態(tài)，這將使 React 意識到它并在它發(fā)生變化時觸發(fā)渲染。我已經(jīng)更新了您的代碼以使用掛鉤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);

我們根據(jù)msg值設(shè)置初始內(nèi)部狀態(tài)，然后在更改時更新該內(nèi)部狀態(tài)，這將導(dǎo)致重新渲染


查看完整回答
反對 回復(fù) 2023-05-11
?
撒科打諢

TA貢獻(xiàn)1934條經(jīng)驗 獲得超2個贊

沒有任何東西告訴 React 它需要重新渲染組件。

變量已更改，但它沒有監(jiān)視變量。

這就是狀態(tài)的目的。更改狀態(tài)明確地通知 React 它需要檢查 DOM 中是否應(yīng)該更新任何內(nèi)容。使用狀態(tài)掛鉤定義變量。

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>

? );

};


查看完整回答
反對 回復(fù) 2023-05-11
?
Qyouu

TA貢獻(xiàn)1786條經(jīng)驗 獲得超11個贊

通常，變量只包含在使用它們的類中，而不是創(chuàng)建一個全局變量。?

狀態(tài)是一個數(shù)據(jù)對象，它包含該類的實例需要使用的任何內(nèi)容。您有一個message組件，因此，如果我們讓它在其狀態(tài)中存儲一條消息，則該消息值將在函數(shù)中的任何地方使用，render()無論何時使用。所以，我們可以做value={this.state.msg}，以及<h1>{this.state.msg}</h1>。?狀態(tài)和組件生命周期是良好 ReactJS 開發(fā)的關(guān)鍵。

正如我們所說，React 是有狀態(tài)的。如果你 put?value="hello!"，它對 ReactJS 來說和 put 是一樣的<h1>hello!</h1>。除非狀態(tài)說因為調(diào)用而改變setState()，ReactJS 認(rèn)為顯示中的任何內(nèi)容都沒有理由改變。只有通過value={this.state...}并且<h1>{this.state....}</h1>我們才能使任何事物充滿活力。

如果您創(chuàng)建這樣的狀態(tài)，請注意我們正在設(shè)置默認(rèn)值...

constructor(props) {

? super(props);

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

}

然后在你的輸入中，你可以顯示它，比如......


<input

? ? type="text"

? ? value={this.state.msg}

還有在價值的展示上，比如...


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


查看完整回答
反對 回復(fù) 2023-05-11
  • 3 回答
  • 0 關(guān)注
  • 199 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號