时间戳

首页 > 解决方案 > 我从 localStorage 获得的输入类型文本的值未提交

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

问题描述

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

                        <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 上，值显示在表单上，​​但在提交表单时未提交。当我使用表单更新状态并登录到控制台时，我得到一个包含数组的对象。该数组包含这些值。

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

谢谢。

标签： javascriptreactjslocal-storage

解决方案

如果您使用基于类的组件，您可以使用它componentDidMount()来检查密钥 fromlocalStorage是否存在。如果您使用的是 react Hooks，那么您可以useEffect()在检查值时使用和应用相同的逻辑。

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

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

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

推荐阅读