时间戳

首页 > 解决方案 > React form + localstorage 不会更新值

reactjs - React form + localstorage 不会更新值

问题描述

目前我正在使用 React hook 表单处理表单，我想将用户的输入保存在本地存储中。此时，每当我从本地存储加载时更改输入的值，输入都不会改变。

当我从 onchange 方法 console.log 事件时，我没有得到日志，所以它没有触发 onchange，这就是我的问题所在。我希望当用户想要更改应该再次更新的表单中的任何内容时。

我在谷歌上搜索过，但我找不到任何相关的问题，所以没有解决方案。由于我是反应的初学者，我不知道自己解决它。

onchange 函数位于与输入组件相同的功能组件中，只是功能。

这是包含输入事件的 onchange 函数。

const onChange = event => {
    localStorage.setItem(event.target.id, event.target.value);
};

这是输入组件

<Input key={index} field={item} formFunction={register({required:true})} checkChange={handleChange} onChange={e => onChange(e)} value={localStorage.getItem(item.label) || ''} errors={errors} selectCheck={handleCountryChange} touched={touched} />

这是输入组件代码

    return (
        <div className={props.field.grid}>
            <div className={props.field.inputClass}>
                    <input 
                        type={props.field.type} 
                        name={props.field.name} 
                        className={props.field.class} 
                        id={props.field.label} 
                        data-save="persist" 
                        onBlur={props.checkChange} 
                        style={{ marginBottom: '5px' }} 
                        onChange={props.onChange}
                        value={props.value}
                    />
                
                
                <label className="left" htmlFor={props.field.label}>{props.field.label}</label>
            </div>
        </div>
    );

标签： reactjslocal-storagereact-hook-form

解决方案

您的问题是您正在使用本地存储来尝试更新应用程序的状态，因此不会重新调用渲染函数并显示新输入的内容。（除非您可以显示更多代码并且您确实在更新 this.props.value ）？

我建议在组件中查找本地状态以进行反应，这将使未来的事情变得容易 10 倍：

反应状态

功能组件状态

如果它是一个类组件，您最好在构造函数中创建一个本地状态，例如，如果它是一个稍微不同的功能组件，则可以实现相同的目标。

this.state = {
 inputVariable: ""
}

然后，当您更改此变量时（在使用设置状态的 onchange 函数中）：

 setstate({
  inputVariable: valueToUpdate
})

您的输入组件值字段应使用 this.state.inputVariable 填充，因此当您更改值时，它将在更改时触发，然后更新将导致重新呈现 UI 的状态。

如果您还要将其保存到本地存储中，则可以像已有的那样进行操作。

推荐阅读