反应材料-ui,我如何知道我可以使用onClick for按钮？

Question

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

我怎么知道我需要使用onClick for click handler？

Answer 1

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>

Answer 2

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

示例 1：

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

示例 2：

? 在线玩吗？

Answer 3

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

例

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

这绝对应该工作...

Answer 4

只需添加onClick到您传递给<IconButton />.

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

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