检查嵌套反应表单中的(子)表单是否脏

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

const ChildForm = React.memo(({ value, onChange }) => {
  const handleChange = useCallback((event) => {
    onChange(event.target.value);
  }, [onChange]);

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
});

const ParentForm = () => {
  const [formData, setFormData] = useState({ childValue: '' });
  const [isDirty, setIsDirty] = useState(false);

  const handleChildChange = useCallback((newValue) => {
    setFormData((prevData) => ({ ...prevData, childValue: newValue }));
    setIsDirty(true);
  }, []);

  const handleSubmit = (event) => {
    event.preventDefault();
    if (isDirty) {
      // 提交表单逻辑
      console.log('Form submitted with:', formData);
      setIsDirty(false); // 重置脏状态
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <ChildForm value={formData.childValue} onChange={handleChildChange} />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ParentForm;