on单击 React MaterialUI 中的 TableRow

Question

我想向我的 TableRow 添加一个侦听器。令我惊讶的是，简单地给出一个像这样的onClick道具：onClick<TableRow onClick = {()=> console.log("clicked")}>    <TableCell> Content </TableCell></TableRow>我无法理解这种行为，因为，看着代码：https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/TableRow 我没有在任何地方看到道具的定义。onClick那么，为什么它有效呢？谢谢。

Answer 1

它不是听 ，而是底层组件，默认情况下是 React 的，因为它将它获得和不使用的所有道具传递给它。TableRowonClicktrTableRow

如果为不同的底层组件提供 ，则如果要保留该功能，则必须使用 该组件执行某些操作。<TableRow component={...} onClick={...} />onClick

---

这是发生的事情：

1. TableRow采取以下道具：

• classes、、 和 （第 39 行）classNamecomponenthoverselected)

• ...other (第 45 行），其中包含您传递给它的所有其他道具

2. 然后，它返回一个（第 50 行），这是您作为 prop 传递的任何内容（有关 prop 类型，请参阅第 82 行），或者，如果您没有传递任何内容，则默认情况下（第 42 行和第 33 行）Componentcomponenttr)

3. 然后，该组件采用 发送的所有道具，这些道具是：trTableRow

• ref (51号线)

• className (52号线)

• role (62号线)

• 使用点差运算符，从（第 63 行）开始的所有内容，其中将包括您的otheronClick

Answer 2

onClick 不是 Material UI 功能（或 prop）。

相反，它是一个原生的 React onClick 函数，您可以阅读更多内容：https://reactjs.org/docs/handling-events.html

无论你在 React 文档中找到什么功能，你都可以在 MaterialUI 和任何 MaterialUI 元素上使用，因为 MaterialUI 是基于 React 的。