我需要根據用戶的輸入旋轉一個元素。問題是，在我的功能組件中，我使用 useState 鉤子來存盤和更新用戶鍵入的值，但元素不是根據最后一個輸入而是根據之前的輸入進行旋轉。
我在 CodeSandbox 中重新創建了簡化示例來說明問題。
如何使其在功能組件中正常作業？
https://codesandbox.io/s/strange-clarke-nlyuo?file=/src/App.js:0-762
uj5u.com熱心網友回復：
您不應該進入 DOM 來設定轉換。您應該從輸入中洗掉 querySelector 行。
<input
type="number"
max={359}
value={value}
onChange={(e) => {
setValue(e.target.value);
// don't do this ??
document.querySelector("h1").style.transform = `rotate(${value}deg)`;
}}
/>
狀態更改將觸發重新渲染，因此只需在渲染期間設定轉換：
<h1
style={{
transform: `rotate(${value}deg)`,
border: "1px solid pink",
display: "inline",
padding: "10px"
}}
>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/383861.html
標籤：javascript css 反应