Así que soy bastante nuevo en reaccionar y estoy tratando de hacer una pantalla de pinpad ahora, pero estoy atascado. no sé cómo usar useEfect para la validación de un pin de 4 dígitos en mi aplicación, como en, estoy confundido dónde y cómo escribirlo para que realmente funcione, ¿hay algún ejemplo para que pueda ver cómo hacerlo? ?
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))}> < </button> <button onClick={() => setPin((pin) => `${pin}0`)}>0</button> <button onClick={() => setPin("")}>C</button> </div> </div> </div> ); }Simplemente verifique los cambios en el estado de su pin usando la matriz de dependencia useEffect y luego registre el PIN guardado si alcanza los cuatro dígitos.
En este ejemplo, he usado una matriz para almacenar los números que luego join . (También me he tomado la libertad de usar CSS Grid y un componente Button, para que el código sea lo más SECO posible).
const { useEffect, useState } = React; function Example({ test }) { const [ pin, setPin ] = useState(''); const [ attempt, setAttempt ] = useState(0); const [ lock, setLock ] = useState(false); const [ message, setMessage ] = useState(''); // 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) { setAttempt(attempt + 1); setPin(''); setMessage('Incorrect PIN.'); setTimeout(() => setMessage(''), 2000); } else { setMessage('PIN accepted'); } } } else { setMessage('Failed to log in.'); setLock(true); setTimeout(() => setLock(false), 3000); } }, [pin]); function maskedPin() { let str = ''; for (let i = 0; i < pin.length; i++) { str += '*'; } return str; } // Create a new array and map over the elements // to create some buttons return ( <div> <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> <div class="pin">{maskedPin()}</div> <div class="message">{message}</div> </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; } .message { margin-top: 0.5em; } <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>Puede agregar un gancho useEffect con pin como dependencia:
useEffect(() => { console.log(pin, pin.length) }, [pin]) la devolución de llamada pasada a useEffect se llamará cada vez que cambie el pin
Para validar cualquier estado de reacción cuando cambia de estado, puede usar useEffect como este.
useEffect(() => { // pin state changed }, [pin]); useEffect se puede usar cuando se monta o desmonta un componente o cambia cualquier variable de estado. Las variables que se utilizan entre corchetes ( pin en este ejemplo) se denominan variables dependientes. Eso significa que cuando estas variables cambien, ejecutará ese código específico.
Para más uso de ReactGancho de efecto