以前的 state 在 useState 功能組件中

Question

我需要根據用戶的輸入旋轉一個元素。 問題是，在我的功能組件中，我使用 useState 掛鈎來存儲和更新用戶鍵入的值，但元素的旋轉不是基於最后一個輸入，而是基於前一個輸入。

我在 CodeSandbox 中重新創建了簡化示例來說明問題。

如何使其在功能組件中正常工作？

https://codesandbox.io/s/strange-clarke-nlyuo?file=/src/App.js:0-762

Answer 1

您不應該進入 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)`;
  }}
/>

state 更改將觸發重新渲染，因此只需在渲染期間設置變換：

<h1
  style={{
    transform: `rotate(${value}deg)`,
    border: "1px solid pink",
    display: "inline",
    padding: "10px"
  }}
>