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

Question

在 codesandbox link here 我有一个有多个输入的表单，我想将输入值存储到每个输入的本地存储中，每次刷新页面时，每个输入的值仍然存在，当然，当它发生变化时，localstorage 也会自动更新每个值，谢谢你帮助我，祝你有美好的一天，谢谢 :)

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

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

Answer 1

您只需要一个函数来为输入设置本地存储并为每个输入赋予唯一的键值，这样您就不会覆盖现有值。类似于：

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

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

this.state = {
    input1: ' '
} 

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

Answer 2

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

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

受控和非受控输入的概念非常有用，以防您通过 API 获取一些数据，然后您必须 auto-fill 输入一些先前从 [= 填充的数据32=]。那个时候你也需要输入是受控输入。在您的场景中，它在 localStorage 中而不是 API。我已经用我的代码更新了你的代码沙箱 link。如果它不起作用，请检查它并分享它。

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

请查找一些与受控和非受控输入相关的参考 link：

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

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

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

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

ReactJs retains multiple react values and do not reset state after being refreshed

state

store

input

local-storage

reactjs