单击表中的行时打开包含数据的模式

import React, { useState } from 'react';
import Modal from 'react-modal';

Modal.setAppElement('#root'); // 确保模态框的正确绑定

function App() {
  const [modalIsOpen, setIsOpen] = useState(false);
  const [selectedRowData, setSelectedRowData] = useState(null);

  const rows = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
    // 其他行数据...
  ];

  const openModal = (data) => {
    setSelectedRowData(data);
    setIsOpen(true);
  };

  const closeModal = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <table>
        <tbody>
          {rows.map(row => (
            <tr key={row.id} onClick={() => openModal(row)}>
              <td>{row.name}</td>
              <td>{row.age}</td>
            </tr>
          ))}
        </tbody>
      </table>

      <Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
        style={{
          content: {
            width: '300px',
            margin: 'auto'
          }
        }}
      >
        <h2>详细信息</h2>
        <p>姓名：{selectedRowData?.name}</p>
        <p>年龄：{selectedRowData?.age}</p>
        <button onClick={closeModal}>关闭</button>
      </Modal>
    </div>
  );
}

export default App;

<Modal
  isOpen={modalIsOpen}
  onRequestClose={closeModal}
  shouldCloseOnOverlayClick={true} // 添加此行
  ...
/>