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

Question

该文档的属性列表不包含1. GET /foos 2. GET /foos?page=2 3. POST/PATCH /foos or /foos/ID (updates page1 or page 2 items) 4. GET /foos?page=3 (now it may contains items from page1/page2) unclear （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 explains，其他道具（例如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

Answer 5

处理点击

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

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

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