如何使用React（this.state）实现用户输入自动保存

Question

我用react-quill做一个富文本编辑器。我想使用this.state来存储数据，以便可以自动保存输入文本框的内容，并且刷新页面后文本输入不会消失。

该代码用于反应式羽毛笔，如何修改代码以实现我的目标

import React from 'react'

export default class Editor extends React.Component {
  constructor (props) {
    super(props)
    this.state = { 
      editorHtml: '',
    }
    this.handleChange = this.handleChange.bind(this)
    if (typeof window !== 'undefined') {
      this.ReactQuill = require('react-quill')
    }
  }

  handleChange (html) {
    this.setState({ editorHtml: html });
  }


  render() {
    const ReactQuill = this.ReactQuill
    if (typeof window !== 'undefined' && ReactQuill) {
      return （    
        <div className='app'>
          <ReactQuill 
            onChange={this.handleChange}
            value={this.state.editorHtml}
            modules={Editor.modules}
            formats={Editor.formats}
          />      
      )
    } else {
      return null;
    }
  }
}

Editor.modules = {
  toolbar: [
    [{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
    [{size: []}],
    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
    [{'list': 'ordered'}, {'list': 'bullet'}, 
     {'indent': '-1'}, {'indent': '+1'}],
    ['link', 'image', 'video'],
    ['clean']
  ],
  clipboard: {
    matchVisual: false,
  }
}

Editor.formats = [
  'header', 'font', 'size',
  'bold', 'italic', 'underline', 'strike', 'blockquote',
  'list', 'bullet', 'indent',
  'link', 'image', 'video'
]

Answer 1

您的数据应保存在哪里？

您没有提到后端服务，所以我不确定您要将数据保存在何处。由于反应在每次刷新页面时都会刷新，因此您无法存储数据，只能从api或本地存储中检索数据。

本地存储

如果您想将数据存储在本地存储中，则需要在应用加载时hydrate进行应用。这是调查本地存储并检索要使用的数据的过程。请注意，只能通过其上编写的机器和浏览器访问此数据，如果要将其发布到其他平台上则无济于事。

API

如果您希望将数据存储在“云”中以供以后检索，则应制作一个api来处理帖子和获取请求。这些将使您将数据保存到连接的云数据库中。在这种情况下，当调用componentDidMount时，您可以使用get请求检索以前的会话数据。

Lambda函数

类似于api，您可以编写“无服务器”函数来处理数据。 firebase函数是从那里开始的好地方，几分钟后就很容易理解和编写。

结论

所有这些解决方案将花费很多时间，没有简单的方法来存储和检索数据，而无需使用某些第三方服务或设置您自己的服务器和数据库。

Answer 2

您要在哪里存储数据是主要问题。如果将其保存到数据库，并且具有用于获取数据的端点。我们说“ http://localhost:3001/api/form/data”。

在React的componentDidMount方法中获取数据后，向端点发出请求并设置状态，如下所示：

:Work
:: Code
exit /b