未提交我从localStorage获得的输入类型文本的值

Question

我正在构建一个有表单的react应用程序。该应用程序应该记住用户的输入，并在下次访问页面时预先填充，并提供编辑值的选项。我使用本地存储，我的输入字段的一个例子是：

<div className="input-field mb-40">
<input 
placeholder='First Name...'
type="text" 
id='first_name'
value={ localStorage.getItem('first_name') || "" }
required 
className='validate f-inpt'
onChange={this.handleChange}
/>

<label htmlFor="first_name" className="active fnt-16">
First Name
</label>
</div>

我的onChange方法是：

handleChange = (e) => {
localStorage.setItem([e.target.id], e.target.value)
this.setState({
[e.target.id]: e.target.value
})
}

在Chrome和Edge上，它运行良好，但在Safari上，值显示在表单上，但在提交表单时不会提交。当我用表单更新状态并将日志记录到控制台时，我会得到一个包含数组的Object。数组包含这些值。

我做错了什么吗？请帮忙！

谢谢。

Answer 1

如果使用基于类的组件，则可以使用componentDidMount()来检查localStorage中的键是否存在。如果您使用的是react Hooks，那么您可以使用useEffect()并在检查值时应用相同的逻辑。

但是，从您的代码来看，我假设您使用的是基于类的组件。因此，componentDidMount()可以是解决方案。

在componentDidMount()中，您可以将值分配给您的状态，并在表单中调用它们。

阅读此处的文档https://reactjs.org/docs/react-component.html#componentdidmount

Answer 2

一开始，您的localStorage有信息，但您的状态为空。

试试这个：

componentDidMount() {
const item = localStorage.getItem("first_name");
if (item) {
this.setState({first_name: item})
}
}