Estoy tratando de hacer una nota guardable con React y localStorage. Cada vez que se hace clic en ' Guardar ', debe guardar el valor en el área de texto en localStorage , y cada vez que se hace clic en ' Borrar ', debe borrar el área de texto y los datos de localStorage .
import { useState } from "react"; import "./App.css"; function App() { const storage = window.localStorage; const [text, setText] = useState(''); const data = storage.getItem('text'); return ( <div className="App"> <div className="box"> <div className="field"> <div className="control"> <textarea className="textarea is-large" placeholder="Notes..." value={data} onChange={(e) => setText(e.target.value)} /> </div> </div> <button className="button is-large is-primary is-active" onClick={() => storage.setItem('text', text)}>Save</button> <button className="button is-large" onClick={() => {storage.removeItem('text'); setText('')}}>Clear</button> </div> </div> ); } export default App;Funciona como se supone, excepto que, cuando hago clic en 'guardar' , no puedo escribir ni eliminar nada en el área de texto. Además, cuando hago clic en 'borrar' , se borra el cuadro solo después de volver a cargar la página.
¿Cómo puedo arreglar esto?
Primero, debe establecer el valor del área de texto usando el text de la variable de estado; de lo contrario, no podrá editarlo más una vez que haga clic en Guardar. Esto se debe a que el valor en el almacenamiento local permanece igual cuando escribe, por lo que es imposible actualizar el valor.
En segundo lugar, debe inicializar el text de la variable de estado con el valor que tiene en el almacenamiento local, si lo hay. De lo contrario, siempre estará vacío cuando actualice.
El código para aplicar ambos cambios es el siguiente:
function App() { const storage = window.localStorage; const data = storage.getItem('text'); const [text, setText] = useState(data ?? ''); return ( <div className="App"> <div className="box"> <div className="field"> <div className="control"> <textarea className="textarea is-large" placeholder="Notes..." value={text} onChange={(e) => setText(e.target.value)} /> </div> </div> <button className="button is-large is-primary is-active" onClick={() => storage.setItem('text', text)}>Save</button> <button className="button is-large" onClick={() => {storage.removeItem('text'); setText('')}}>Clear</button> </div> </div> ); } export default App;En el elemento textArea , debe asignar el "valor" como su estado de "texto".
<textarea className="textarea is-large" placeholder="Notes..." value={text} // --> here onChange={(e) => setText(e.target.value)} />Ver aquí: Ejemplo de trabajo