在ReactJS中单击DataTable行时打开弹出窗口

在ReactJS中，当你点击DataTable的某一行时打开一个弹出窗口，通常涉及到以下几个基础概念和技术：

基础概念

事件处理：在React中，事件处理是通过回调函数来实现的。当用户点击某一行时，会触发一个事件，然后调用相应的回调函数。
状态管理：React使用状态（state）来管理组件的动态数据。点击行时，你可能需要更新状态来显示或隐藏弹出窗口。
组件：React应用由多个组件组成，每个组件都有自己的状态和属性（props）。

类型

模态框（Modal）：最常见的弹出窗口类型，通常用于显示详细信息或进行用户交互。
对话框（Dialog）：类似于模态框，但通常更轻量级，用于简单的确认或输入。

应用场景

数据编辑：点击某一行数据时，弹出一个窗口允许用户编辑该行的详细信息。
信息展示：点击某一行时，弹出一个窗口显示该行的详细信息或相关操作。

示例代码

以下是一个简单的示例，展示如何在React中实现点击DataTable行时打开一个模态框：

import React, { useState } from 'react';
import { Table, Modal, Button } from 'antd';

const data = [
  { key: '1', name: 'John', age: 32 },
  { key: '2', name: 'Jane', age: 28 },
];

const App = () => {
  const [visible, setVisible] = useState(false);
  const [selectedRow, setSelectedRow] = useState(null);

  const showModal = (record) => {
    setSelectedRow(record);
    setVisible(true);
  };

  const handleOk = () => {
    setVisible(false);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        <Button type="link" onClick={() => showModal(record)}>
          View Details
        </Button>
      ),
    },
  ];

  return (
    <>
      <Table columns={columns} dataSource={data} rowKey="key" />
      <Modal
        title="Details"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        {selectedRow && (
          <>
            <p>Name: {selectedRow.name}</p>
            <p>Age: {selectedRow.age}</p>
          </>
        )}
      </Modal>
    </>
  );
};

export default App;