【问题标题】：react Material-ui, How do I know I can use onClick for button?react Material-ui，我怎么知道我可以使用 onClick 按钮？
【发布时间】：2017-03-03 05:06:12
【问题描述】：

文档上的属性列表不包括onClick (http://www.material-ui.com/#/components/icon-button)

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

【问题讨论】：

什么意思我怎么知道我需要使用 onClick 来处理点击处理程序？
你可以很好地使用它，但这是在 React 中使用 Material ui 时你的问题最少的问题。
@OrthoHomeDefense 是否有任何已知的材料 ui 的恶名与反应？我刚刚开始做我的第一个反应项目，并尽可能使用材料 ui，现在你吓到我了：|
@AsifMD 嗯...自从我使用它已经三年多了，所以事情可能会有所不同，但据我所知，使用 refs 之类的东西非常困难，因为你必须遍历层次结构中的 15 个属性以找到它们的组件，我不断打破组件封装。问题是 refs 建议用于第三方 dom 元素。请记住，这是 3 年前的事了，所以可能会发生很多变化。

标签： reactjs material-ui

【解决方案1】：

处理点击次数

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

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

请注意，文档避免在组件的 API 部分提及原生 props（有很多）。 API for Button

【讨论】：

【解决方案2】：

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

示例 1：

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

示例 2：

⬇在线玩它⬇

【讨论】：

【解决方案3】：

Material-UI 文档没有列出标准的 React（原生浏览器）事件：

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

这是因为您应该已经知道可用的原生事件。例如，您也可以使用onWheel。如果包含所有原生事件，这将是一个冗长且多余的列表。

作为kouak explains，其他props（例如onClick）被传递给相关的子组件。

随机示例：

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

【讨论】：

【解决方案4】：

只需将onClick 添加到您传递给<IconButton /> 的道具中。

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

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

【讨论】：

链接失效

【解决方案5】：

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

例子

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

这肯定行得通...

【讨论】：

如果文档将继承树一直显示到基类，并带有指向每个文档的链接，将会更加有用。我的意思的一个很好的例子是记录 Microsoft .NET Framework 和 MFC 库的方式。
@DavidA.Gray 你应该向项目提交一个问题，看到一个材质 UI 类的继承链肯定会很高兴