ReactJs 保留多个react 值，刷新后不重置状态

Question

在代码框链接here 我有一个包含多个输入的表单，我想将输入值存储到每个输入的本地存储中，并且每次刷新页面时，每个输入的值仍然存在，当然，当它更改时，localstorage 也会自动更新每个值，感谢您的帮助，祝您有美好的一天，谢谢 :)

p/s：正如你在这张 gif 图片中看到的 ，

我可以将它们的值存储在本地存储中，但我不知道如何在刷新页面时保留输入中的值并更新它。我的想法是克隆 Medium，当用户想写新故事时，它会在 url 参数中自动生成一个新 id，当输入文本 onChange 时，firebase 实时数据库将存储 event.target.value 并将其保存在本地存储中但是当我刷新页面时，文本的状态消失了，我不知道如何处理它，感谢您花时间帮助我，我真的很感激

Answer 1

我希望这能回答您的问题，因为输入元素不是受控输入，您可能无法在重新加载时设置输入的预填充值。在浏览器环境中，用户可以控制和不受控制的输入和动作两种类型，当你传递一个值属性并告诉它它的值应该是什么时，输入是受控的，

而对于不受控制的输入，不需要将值作为属性。每当用户输入一个值时，该值都会反映在 UI 中，因为 HTML 输入元素会将其存储在其本地状态中，以便向用户提供视觉反馈。

当您通过 API 获取一些数据时，受控和非受控输入的概念非常方便，然后您必须使用一些以前从 API 填充的数据自动填充输入。那个时候你也需要输入是受控输入。在您的场景中，它在 localStorage 中而不是 API。 我已经用我的代码更新了您的代码沙箱链接。如果不起作用，请查看并分享。

https://codesandbox.io/s/react-multiple-input-value-demo-forked-tf423?file=/src/Demo.js

请找到一些与受控和非受控输入相关的参考链接：

https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/

https://reactjs.org/docs/uncontrolled-components.html

https://www.robinwieruch.de/react-controlled-components

Answer 2

您只需要一个函数来为输入设置本地存储并为每个输入提供唯一的键值，因此您不会覆盖现有值。 比如：

setValue = () => {
    localStorage.setItem(uniqueId, value)
}

设置值后，刷新页面后不会被删除。 如果您想随时检索这些值，只需使用 localStorage.getItem(key)。 如果您想要在刷新页面时预先写入输入，那么您需要有一个状态来存储组件安装后的初始值：

this.state = {
    input1: ' '
} 

componentDidMount() {
    this.setState({
        input1: localStorage.getItem(''inputValue1'')
    })
}