如何在 ReactJS 中保存长表单的草稿

Question

我有一个包含 80 多个输入字段的长表单。提交后，它工作正常并将数据保存在 neo4j 数据库中。我需要有 'Save Draft' 功能，以防用户以后想填写表格。我该如何实施？

编辑：

我正在尝试将表单数据（包括空输入字段）保存到 neo4j 数据库中。

我在构造函数中有一个数组和表单：

constructor(props){
        super(props);
        this.state = {
            mydata: {
                data1: {},
                data2: {},
            }
        };
        this.saveAsDraft = this.saveAsDraft.bind(this);
        <form>
            <MyInput 
                title="Name" 
                inputs={[{title: "name", inputType: "text" }]} 
                onChange={this.handleChange}
                type="freeText"
            />
            <MyInput 
                title="Email" 
                inputs={[{title: "email", inputType: "text" }]} 
                onChange={this.handleChange}
                type="freeText"
            />
        </form>
}

并且我使用了以下方法来处理表单提交：

async saveAsDraft(){
    const name = this.state.mydata['data1']['name'];
    const email = this.state.mydata['data1']['email'];

    const neo4j = require('neo4j-driver')

    const driver = neo4j.driver('bolt://localhost:7687', neo4j.auth.basic('neo4j', 'pass'))
    const session = driver.session({database: 'neo4j'})
    const txc = session.beginTransaction()
    try {
       const result = await txc.run(
                'CREATE (:Person { name: $name, email: $email })',
                {
                    name: name, 
                    email: email                    
                }
              )
  await txc.commit()
        console.log('commited')
    } catch (error) {
        console.log(error) 
        await txc.rollback()
        console.log('rolled back') 
    } finally {
        await session.close()
    }
}

当输入字段被填满时它起作用。但是当输入字段为空时它显示以下错误：

Neo4jError: Expected parameter(s): name, email

我如何处理此处的空输入字段？我想执行密码查询并创建具有空输入值的节点和关系。我还需要稍后提取数据以在用户以后想要继续编辑表单时将它们填充到表单中。

Answer 1

如果需要从不同的设备或浏览器访问表单答案，则必须将数据存储到数据库中。

如果用户只能在同一浏览器上访问保存的表单数据就足够了，您可以使用本地存储来实现。一些状态管理库，如 redux 和 mobxstate tree 提供了持久化特性，因此您可以通过较小的配置将应用程序的整个状态持久化在本地存储中。

如何在 ReactJS 中保存长表单的草稿

How to save draft of a long form in ReactJS

reactjs

neo4j

cypher