Question

当前，我正在使用React钩子表单来处理表单，并且希望将来自用户的输入保存在localstorage中。此时，每当我从本地存储加载时更改输入的值时，输入都不会更改。

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

我在Google上进行了搜索，但找不到任何相关问题，因此没有解决方案。因为我是反应的初学者，所以我自己也没有解决的办法。

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>
    );

Answer 1

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

我建议在组件中查找局部状态以做出反应，这将使事情将来变得容易十倍：

React state

Functional component state

如果它是类组件，则最好在构造函数中创建局部状态，例如，如果它是功能组件，则可以实现相同的状态。

this.state = {
 inputVariable: ""
}

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

 setstate({
  inputVariable: valueToUpdate
})

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

如果您还另外将其保存到本地存储，则可以像已经拥有的那样保存。

React Form + Localstorage不会更新值

1 个答案: