Table - Ant Design, onRow DoubleClick

Question

我想打开模式 window，当我在 Table antd 中双击 onRow 时。并将属性传递给模态。像这样：

<Table
    columns={columns}
    components={components}
    dataSource={dataSource}
    onRow={(record) => {
        return {
            onDoubleClick: () => {
                return <ModalWindow props={record} />
                // or
                return <ModalWindow> {record.name} </ModalWindow>
            }
        }
    }} />

问题是没有返回jsx。我可以保存状态，如下所示：

const [visible, setVisible] = useState(false);
const [record, setRecord] = useState([]);  
<Table
        columns={columns}
        components={components}
        dataSource={dataSource}
        onRow={(record) => {
            return {
                onDoubleClick: () => {
                    setRecord(record);
                    setVisible(true);
                }
            }
        }} />
        {visible &&
            <ModalWindow record={record} />
        }

但这不是我的方式。请帮助我。

Answer 1

您可以通过使用一个 Modal 并在每一行上使用 double-click 更新模态内容来满足您的要求，如下所示：

function App() {
  // ...
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [activeRecord, setActiveRecord] = useState(null);

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

  return (
    <>
      <Table
        columns={columns}
        dataSource={data}
        onRow={(record) => {
          return {
            onDoubleClick: () => {
              setActiveRecord(record);
              setIsModalVisible(true);
            },
          };
        }}
      />
      <Modal
        title="User info"
        visible={isModalVisible}
        onCancel={closeModal}
        footer={null}
      >
        {/* render whatever you want based on your record */}
        <p>{activeRecord?.name} </p>
      </Modal>
    </>
  );
}

我实现了一个例子Here on stackBlitz，你可以看看

Table - Ant Design, onRow DoubleClick

Table - Ant Design, onRow DoubleClick

javascript

reactjs

antd