Question

我有表格，提交后用户将被带到另一页。如果他们点击浏览器返回按钮，他们将返回到表单但输入数据不再存在。

在反应中恢复输入数据的正确方法是什么？

形式：

export default class Update extends React.Component{
    constructor(){
        super();
        this.state = {
            items: {
                firstName: '',
                lastName: '',
            }
        };
    }
    updateContact(e){
        e.preventDefault();
        // saving data
        // then redirect 
        this.context.router.push('/');
    }
    render(){ 
        return(
            <form id="new-form" onSubmit={this.updateContact.bind(this)}>
                <input type="text" placeholder="First Name"  />
                <button type="submit" class="btn" >Update</button>
            </form>
        )
    }
}


Update.contextTypes = {
    router: PropTypes.object.isRequired
}

Answer 1

您不能仅仅依靠浏览器为您执行此操作，因为它不起作用，尤其是对于动态创建的表单。

您需要的是适当的状态管理基础架构。看起来你使用反应路由器。您必须为历史记录中的每个页面管理自己的状态，然后保存数据。要使其保持不变，您可以使用localStorage，sessionStorage，甚至更强大的选项，例如localForage或服务器端同步。

然后，您将在路由更改上执行回调，以恢复组件中的状态。

没有自动执行此操作的样板方法。你必须为你的表单实现它。

您可以看到scroll-behavior库如何通过历史记录更改来保持滚动偏移。

reactJS - 当浏览器返回时显示表单输入

1 个答案: