如何解决ReactJs保留多个反应值，并且刷新后不会重置状态
在codesandbox链接here中，我有一个具有多个输入的表单，我想将输入值存储到每个输入的本地存储中，并且每次刷新页面时，每个输入的值仍然存在，当然，当它更改时，localstorage也会自动更新每个值，感谢您的帮助，祝您有美好的一天，谢谢：）
p / s：如您在此gif图片 
我可以将它们的值存储在localstorage中，但是当页面刷新并更新时，我不知道如何在输入中保留值。我的想法是克隆Medium，当用户想要编写新故事时，它会在url参数中自动生成一个新ID，当输入文本onChange时，firebase实时数据库将存储event.target.value并将其保存在localstorage中但是当我刷新页面时，文本状态消失了，我不知道如何处理它，感谢您抽出宝贵时间来帮助我，
解决方法
您只需要一个函数即可为输入设置本地存储并为每个输入提供唯一的键值，因此您不会覆盖现有值。 像这样：
setValue = () => {
localStorage.setItem(uniqueId,value)
}
设置值后，刷新页面后不会将其删除。 如果要随时检索这些值，则只需使用localStorage.getItem（key）。 如果要在刷新页面时预先写入输入，则需要在组件挂载后有一个状态来存储初始值：
this.state = {
input1: ' '
}
componentDidMount() {
this.setState({
input1: localStorage.getItem(''inputValue1'')
})
}
我希望这能回答您的查询，这是您可能无法在重载时设置输入的预填充值的原因，因为输入元素不是受控输入。在浏览器环境中，对于受控制的用户和不受控制的用户，可以有两种输入和操作，当您向其传递一个value属性并告诉它该输入的值是什么时，输入将受到控制。
对于不受控制的输入，则不需要将该值作为属性。每当用户输入值时，该值就会反映在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/
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。