如何使用React.js从modal发布动态表单数据

import React, { useState } from 'react';

const Modal = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 在这里处理表单提交逻辑，可以将formData发送到服务器或执行其他操作
    console.log(formData);
  };

  return (
    <div>
      <button>打开modal</button>
      {/* modal内容 */}
      <form onSubmit={handleSubmit}>
        <input type="text" name="name" value={formData.name} onChange={handleChange} />
        <input type="email" name="email" value={formData.email} onChange={handleChange} />
        <textarea name="message" value={formData.message} onChange={handleChange} />
        <button type="submit">提交</button>
      </form>
    </div>
  );
};

export default Modal;

import React, { useState } from 'react';
import Modal from './Modal';

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => {
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <h1>应用程序</h1>
      <button onClick={handleOpenModal}>打开modal</button>
      {isModalOpen && <Modal onClose={handleCloseModal} />}
    </div>
  );
};

export default App;