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

Question

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

Answer 1

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

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

当输入发生变化时，把变化写到react state，还有localStorage

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

组件挂载时，我们想将input的初始状态设置为localStorage中的值

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

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

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

React retains the input value after the page is refreshed and keeps it in local storage