表 - Ant 设计，onRow DoubleClick

Question

I want open modal window, when i doubleClick onRow in Table antd. And pass property to modal. Like this:

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

The problem is that no jsx is returned. I can save in state, like here:

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} />
        }

but that's not my way. Help me, please.

Answer 1

You can handle your requirement by using one Modal and updating content of modal with double-click on every row, like this:

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>
    </>
  );
}

I've implemented an example Here on stackBlitz , you can check it out.