Reactjs中的useEffect驗證

所以我對反應還很陌生，我現在正在嘗試制作一個密碼鍵盤螢屏，但我被卡住了。我不知道如何使用 useEfect 來驗證我的應用程式中的 4 位數 pin，例如，我只是困惑在哪里以及如何撰寫它，所以它實際上可以作業，是否有任何示例，以便我可以了解如何去做?

    export default function App() {
  const [pin, setPin] = useState("");

  return (
    <div>
      <div>{pin}</div>
      <div>
        <div>
          <button onClick={() => setPin((pin) => `${pin}1`)}>1</button>
          <button onClick={() => setPin((pin) => `${pin}2`)}>2</button>
          <button onClick={() => setPin((pin) => `${pin}3`)}>3</button>
        </div>
        <div>
          <button onClick={() => setPin((pin) => `${pin}4`)}>4</button>
          <button onClick={() => setPin((pin) => `${pin}5`)}>5</button>
          <button onClick={() => setPin((pin) => `${pin}6`)}>6</button>
        </div>
        <div>
          <button onClick={() => setPin((pin) => `${pin}7`)}>7</button>
          <button onClick={() => setPin((pin) => `${pin}8`)}>8</button>
          <button onClick={() => setPin((pin) => `${pin}9`)}>9</button>
        </div>
        <div>
          <button onClick={() => setPin((pin) => pin.slice(0, pin.length - 1))}>
            &lt;
          </button>
          <button onClick={() => setPin((pin) => `${pin}0`)}>0</button>
          <button onClick={() => setPin("")}>C</button>
        </div>
      </div>
    </div>
  );
}

uj5u.com熱心網友回復：

只需pin使用useEffect依賴陣列檢查您的狀態的變化，然后記錄保存的 PIN 如果達到四位數。

在這個例子中，我使用了一個陣列來存盤我然后join向上的數字。（我還冒昧地使用了 CSS Grid 和一個 Button 組件，這樣代碼就盡可能地干了）。

const { useEffect, useState } = React;

function Example({ test }) {

  const [ pin, setPin ] = useState('');
  const [ attempt, setAttempt ] = useState(0);
  const [ lock, setLock ] = useState(false);

  // Reset the state if the "number" is "C"
  // otherwise add the number to the state string
  function handleClick(e) {
    const { number } = e.target.dataset;
    if (number === 'C') {
      setPin([]);
    } else {
      setPin(`${pin}${number}`);
    }
  }

  // If the pin state has changed,
  // and the length of the array is four,
  // log the state
  useEffect(() => {
    if (attempt < 3) {
      if (pin.length === 4) {
        if (pin === test) {
          console.log('PIN is correct');
        } else {
          console.log('Incorrect PIN');
          setAttempt(attempt   1);
          setPin('');
        }
      }
    } else {
      setLock(true);
    }
  }, [pin]);

  // Create a new array and map over the elements
  // to create some buttons
  return (
    <div class="grid">
      {new Array(9).fill('').map((el, i) => (
        <Button lock={lock} number={i   1} handleClick={handleClick} />
      ))}
      <Button lock={lock} number="0" handleClick={handleClick} />
      <Button lock={lock} number="C" handleClick={handleClick} />
    </div>
  );
};

function Button({ lock, number, handleClick }) {
  return (
    <button
      disabled={lock}
      data-number={number}
      onClick={handleClick}
    >{number}</button>
  );
}

ReactDOM.render(
  <Example test="1234" />,
  document.getElementById('react')
);

.grid { width: 100px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

uj5u.com熱心網友回復：

您可以添加一個useEffect鉤子pin作為依賴：

useEffect(() => {
 console.log(pin, pin.length)
}, [pin])

useEffect每次pin更改時都會呼叫傳遞給的回呼

uj5u.com熱心網友回復：

要在狀態更改時驗證任何反應狀態，您可以useEffect像這樣使用。

useEffect(() => {
   // pin state changed
}, [pin]);

useEffect可在組件掛載、卸載或任何狀態變數更改時使用。在方括號內使用的變數（pin在本例中）稱為因變數。這意味著當此變數更改時，它將運行該特定代碼。

欲了解更多React useEffect 鉤子

標籤：javascript 反应 使用状态

上一篇：Cypressafter()僅在成功后呼叫

下一篇：React檢測iframesrc的變化