76

该文档上的属性列表不包含onClick （http://www.material-ui.com/#/components/icon-button）

我怎么知道我需要使用onClick作为点击处理程序？

reactjs material-ui

— 尤金
source

您是什么意思，我怎么知道我需要使用onClick作为点击处理程序？

— 李彦宏

3

您可以很好地使用它，但这是将材料ui与React一起使用时最少的问题。

— 2016年

@OrthoHomeDefense是否有任何已知的材料ui与反应臭名昭著？我刚刚开始做我的第一个项目React和尽可能使用Material ui，现在您吓到我了：|

— AsifM

1

@AsifMD Hmm ...自从我使用它已有三年多了，所以事情可能会有所不同，但是根据我的记忆，使用类似的东西refs非常困难，因为您必须遍历15个属性才能找到它们组件，我一直在破坏组件封装。refs对于第三方dom元素，建议使用此问题。请记住，这是3年前，因此可能已经发生了很多变化。

— 火车

84

Material-UI文档未列出标准React（本机浏览器）事件：

https://facebook.github.io/react/docs/events.html#mouse-events

这是因为期望您已经知道可用的本机事件。例如，您也可以使用onWheel。如果包括所有本地事件，那将是一个冗长且多余的列表。

正如kouak解释的那样，其他道具（例如onClick）被传递到相关的子组件。

随机示例：

<Button color="primary" onClick={() => { console.log('onClick'); }}>
    Primary
</Button>

— 三十点
source

8

您可以在上添加包装器<IconButton/>以获取onClick事件。

例

render() {
  return <div class="font-icon-wrapper" onClick={this.fontIconClick}>
    <IconButton iconClassName="muidocs-icon-custom-github" />
  </div>
}

这绝对应该工作...

— 普拉内什·拉维（Pranesh Ravi）
source

6

如果文档将继承树一直显示到基类，并带有指向每个文档的链接，则文档将更加有用。我的意思的一个很好的例子是Microsoft .NET Framework和MFC库的记录方式。

— 戴维·格雷

2

@ DavidA.Gray，您应该向项目提交一个Issue，一定会很高兴看到材质UI类的继承链

5

只需添加onClick到传递给的道具即可<IconButton />。

在文档中未引用的道具将传递到其内部<EnhancedButton />组件，该组件将onClick很好地处理。

看到这里：https : //github.com/callemall/material-ui/blob/master/src/IconButton/IconButton.js#L241

— 夸克
source

6

链接已断开

— Cyrf

5

请记住，您可以在每个具有DOM渲染器的单一组件中使用onClick，因为它是本机React事件（不必是按钮组件）。

范例1：

<Paper
  className={classes.paper}
  onClick={() => {
    alert("✔️ This works on every component!");
  }}
>
  Click me!
</Paper>

范例2：

online在线玩⬇

— 哈桑·塞法·奥扎尔普（Hasan Sefa Ozalp）
source

0

处理点击

所有组件都接受一个onClick应用于根DOM元素的处理程序。

<Button onClick={() => { alert('clicked') }}>Click me</Button>

请注意，文档避免在组件的API部分提及本地道具（很多）。按钮API

— 码
source

反应Material-ui，我怎么知道我可以使用onClick for button？

处理点击