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

import React, { useState } from 'react';

const LongForm = () => {
  const [draft, setDraft] = useState('');

  // 其他表单逻辑...

  return (
    <form>
      {/* 表单字段... */}
    </form>
  );
}

export default LongForm;

import React, { useState, useEffect } from 'react';

const LongForm = () => {
  const [draft, setDraft] = useState('');

  // 自动保存草稿
  useEffect(() => {
    saveDraft();
  }, [draft]);

  // 保存草稿
  const saveDraft = () => {
    // 使用浏览器的本地存储来保存草稿
    localStorage.setItem('draft', draft);
  }

  // 加载草稿
  const loadDraft = () => {
    // 从本地存储中加载草稿
    const savedDraft = localStorage.getItem('draft');
    if (savedDraft) {
      setDraft(savedDraft);
    }
  }

  // 其他表单逻辑...

  return (
    <form>
      {/* 表单字段... */}
    </form>
  );
}

export default LongForm;

import React, { useState, useEffect } from 'react';

const LongForm = () => {
  const [draft, setDraft] = useState('');

  // 加载草稿
  useEffect(() => {
    loadDraft();
  }, []);

  // 保存草稿
  const saveDraft = () => {
    localStorage.setItem('draft', draft);
  }

  // 加载草稿
  const loadDraft = () => {
    const savedDraft = localStorage.getItem('draft');
    if (savedDraft) {
      setDraft(savedDraft);
    }
  }

  // 其他表单逻辑...

  return (
    <form>
      {/* 表单字段... */}
    </form>
  );
}

export default LongForm;