使整行可點擊

Question

我是 react(hooks) typescript 的新手，試圖邊做邊學，在這里我創建了 antd 表（有效），在表的右側是“編輯”，它是可點擊的並且效果很好，但我的問題是如何使每一行都可點擊而不是“編輯”？ 就像我可以點擊行上的任何地方，它應該帶我到它的“編輯”鏈接，而不是我只點擊“編輯”：

 import { useTranslation } from "react-i18next"; const { t } = useTranslation(); const columns = [ { title: t("tilaus.state"), dataIndex: "state", key: "state", render: (value: OrderState) => ( <span className="material-icons"> </span> ), }, { title: t("request.parcelId"), dataIndex: "parcelId", key: "parcelId", }, { title: t("request.date"), dataIndex: "date", key: "date", render: (value: Date) => <div>{value.toLocaleDateString("af-AF")}</div>, }, { title: t("request.sender"), dataIndex: "sender", key: "sender", render: (value: CustomerDto) => <div>{value.name}</div>, }, { title: t("request.recipient"), dataIndex: "recipient", key: "recipient", render: (value: CustomerDto) => <div>{value.name}</div>, }, { title: t("request.price"), dataIndex: "price", key: "price", }, { title: "", dataIndex: "id", key: "id", render: (value: string) => ( <Link to={"details/" + value}>{t("request.edit")}</Link> ), }, ]; <Table dataSource={orders} columns={columns} pagination={false} scroll={{ x: true }} onRow={(record, rowIndex) => { return { onClick: (event) => { handleClick(record); }, }; }} />

Answer 1

看起來您正在使用 ant.d表。 我抓住了其中一個示例，控制台記錄了 output。 您可以在這里找到它： https://codesandbox.io/s/s1xds?file=/index.js向您展示如何觸發整行中的 onclick。

對於您的特定事物，您需要更改onRow道具。 您不能直接將鏈接添加到該行，但您可以使用 react-router 的history （如果您正在使用它，請參閱此處的文檔）或在調用 ZC0BB2196426022E45ADF9A5B6EDZ34 時直接改變 URL。

所以在你的情況下，你必須這樣做：

<Table
            
            dataSource={orders}
            columns={columns}
            pagination={false}
            scroll={{ x: true }}
            onRow={(record, rowIndex) => {
              return {
                onClick: (event) => {
                  history.push(`/details/${record.id}`);
                },
              };
            }}
          />

或者

<Table
            
            dataSource={orders}
            columns={columns}
            pagination={false}
            scroll={{ x: true }}
            onRow={(record, rowIndex) => {
              return {
                onClick: (event) => {
                  window.location.href = `${window.location.href}/details/${record.id}`
                },
              };
            }}
          />