首頁猿問 React 基礎 - 更新 var...

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

JavaScript

MMTTMM 2023-05-11 09:59:12

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

查看完整描述

3 回答

藍山帝景

TA貢獻1843條經驗獲得超7個贊

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>

</p>

</div>

);

};

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

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

我們根據msg值設置初始內部狀態，然后在更改時更新該內部狀態，這將導致重新渲染

反對回復 2023-05-11

撒科打諢

TA貢獻1934條經驗獲得超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>

? );

};

反對回復 2023-05-11

Qyouu

TA貢獻1786條經驗獲得超11個贊

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

狀態是一個數據對象，它包含該類的實例需要使用的任何內容。您有一個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>

反對回復 2023-05-11

3 回答
0 關注
204 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

3 回答

添加回答