React 在页面刷新后保留输入值并将其保存在本地存储中

Question

我正在使用 React 来实现一项功能，它可以保存输入中的文本并自动更新到本地存储，我希望即使刷新页面，输入中的文本也会保留，并且状态不会从头开始重置。谢谢你帮助我，祝你有美好的一天。请在以下代码和盒子代码和盒子链接中给我一个演示。再一次非常感谢你

Answer 1

首先你想将输入的值存储在反应状态中

const [value, setValue] = useState("");

当输入改变时，将改变写入react state，还有localStorage

const handleChange = (e) => {
  setValue(e.target.value);
  localStorage.setItem("inputValue", e.target.value);
};

当组件挂载时，我们要将输入的初始状态设置为localStorage中的值

useEffect(() => {
  setValue(localStorage.getItem("inputValue"));
}, []);

最后，将处理程序挂接到 onChange，并使用 React 状态作为表单值

<input
  value={value}
  onChange={handleChange}
/>