Shopify Polaris DataTable中带有可点击的行

Question

有没有办法使Shopify Polaris DataTable的行可点击？

- Alexis

Answer 1

使行可点击并不是React的本地功能，但似乎你仍有几个选择：

1. 直接在DOM上添加事件监听器来触发你的操作（但这在React中是一种反模式）。
2. 对于字符串数据，你可以在rows数组中添加dom元素（也可能是组件）。你可以定义一个函数，并用<div onClick="..."></div>包装每个数据。为了使用户体验更好，使整个行可点击（而不仅仅是其内容），你需要向包装div添加一些自定义css，以便超出初始Polaris单元格填充。

请参见下面的链接： https://codesandbox.io/s/kind-joliot-ich3x?file=/App.js

- Aurélien B.

Answer 2

只需要将每一行更改为下面给出的HTML代码，并将CSS添加到您的项目中。

<div className="row_click" onClick={() => rowClicked(row)}>

tbody .Polaris-DataTable__Cell{
  padding: 0px !important;
}
.row_click {
  cursor: pointer;
  padding: var(--p-space-4);
}

- Bilal Saeed Alam

Answer 3

最简单的方法是将您想要点击的元素包裹在一个带有onClick()属性的div中。

您可以这样做：

<div onClick={() => alert("Clicked!")}>.
    YOUR CLICKABLE AREA HERE
</div>

- EliottPal