Question

我正在使用react进行一项功能，该功能可以保存输入中的文本并自动更新到本地存储中，我希望即使刷新页面，输入中的文本仍保持不变，并且状态不会从头开始重置。感谢您的帮助，祝您有美好的一天。请在以下代码和框codesandbox link中给我一个演示。再一次谢谢你

Answer 1

首先，您要以反应状态存储输入的值

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

当输入更改时，将更改写入反应状态，并写入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}
/>