我正在研究一個 useState 示例，我發現它在第二次渲染之前不起作用。第一次使用它的默認值是 0。
import React, { useState } from "react";
const MyState = () => {
const [age, setage] = useState(0);
function handleClick() {
var enteredAge = document.getElementById("txtAge").value;
if (enteredAge) {
setage(enteredAge);
if (enteredAge > 50) {
document.getElementById("lblResult").innerText = "Wow " age "! You're old, rest up!";
} else {
document.getElementById("lblResult").innerText = "Wow " age "! Young gun!";
}
}
}
return (
<div>
Enter Your Age:
<input type="text" id="txtAge" name="age" />
<button onClick={handleClick}> Check </button>
<label id="lblResult"></label>
</div>
);
};
export default MyState;
如果我執行以下操作，這在每次渲染時都可以正常作業。但是，如果我像上面顯示的那樣在函式中使用 setState，那么 innerText 中的年齡仍然保持舊值。為什么會這樣，這樣做的正確方法是什么？
<label id="lblResult">{age}</label>
uj5u.com熱心網友回復：
你不應該直接改變 DOM 節點，因為 react 會維護 V-DOM 并且你正在做的改變lblresult會在重新渲染后丟失。正確的做法是使用狀態值，有條件地渲染資料。
import React, { useState } from 'react';
const MyState = () => {
const [age, setage] = useState(0);
function handleClick() {
var enteredAge = document.getElementById('txtAge').value;
if (enteredAge) {
setage(enteredAge);
}
}
return (
<div>
Enter Your Age:
<input type="text" id="txtAge" name="age" />
<button onClick={handleClick}> Check </button>
<label id="lblResult">
{age > 50
? `"Wow ${age}! You're old, rest up!`
: `Wow ${age}! Young gun!`}
</label>
</div>
);
};
export default MyState;
更新：
正如 Bjorn 提到的，您可以使用refs而不是getElementById獲取輸入欄位值。Ref 是一個在重新渲染之間具有持久參考的 Object，currentref 的屬性持有 DOM 節點。
import React, { useState, useRef } from 'react';
const MyState = () => {
const [age, setage] = useState(0);
const inputRef = useRef(null);
function handleClick() {
var enteredAge = inputRef.current.value;
if (enteredAge) {
setage(enteredAge);
}
}
return (
<div>
Enter Your Age:
<input type="text" id="txtAge" name="age" ref={inputRef} />
<button onClick={handleClick}> Check </button>
<label id="lblResult">
{enteredAge > 50
? `"Wow ${age}! You're old, rest up!`
: `Wow ${age}! Young gun!`}
</label>
</div>
);
};
export default MyState;
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/468922.html