React Material-UI，我如何知道我可以在按钮上使用onClick？

Question

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

我如何知道需要使用 onClick 作为单击处理程序？

- eugene

---

你的意思是什么？“我如何知道需要使用onClick作为单击处理程序”？ - Andrew Li

你可以很好地使用它，但当你在React中使用Material UI时，这只是你面临的最小问题。 - Train

@OrthoHomeDefense 你知道在React中使用Material UI是否存在任何问题吗？我刚开始做我的第一个React项目，并尽可能地在所有地方使用Material UI，现在你让我感到有些害怕 :| - AsifM

@AsifMD 嗯...我已经三年没用过它了，所以可能有些不同，但是从我记得的来看，使用像refs这样的东西非常困难，因为你必须通过15个层次的层级来查找它们的组件，而且我一直在破坏组件封装。问题在于refs被推荐用于第三方dom元素。只要记住这是三年前的事情，很多东西可能已经改变了。 - Train

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>

- thirtydot

Answer 2

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

示例

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

这一定会起作用...

- Pranesh Ravi

---

如果文档能够展示继承树一直追溯到基类，并提供每个类的文档链接，那么它会更加有用。一个很好的例子是微软.NET框架和MFC库的文档方式。请注意保持翻译的准确性和原意不变。 - David A. Gray

@DavidA.Gray，你应该向项目提交一个问题（Issue），这样可以很好地展示材料UI类的继承链。 - user9903

Answer 3

记住，由于onClick是React本机事件，因此您可以在任何具有DOM渲染器的组件中使用它（不必是按钮组件）。

示例1：

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

---

示例 2:

⬇ 在线体验 ⬇

- Hasan Sefa Ozalp

Answer 4

只需在传递到 <IconButton /> 的 props 中添加 onClick。

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

可参见此处：https://github.com/callemall/material-ui/blob/master/src/IconButton/IconButton.js#L241

- kouak

---

链接已损坏。 - cyrf

Answer 5

处理点击事件

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

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

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

- Ericgit

Answer 6

我们应该始终为父组件提供onClick事件，因为有时依赖于浏览器，如果我们将其提供给子组件，事件可能无法正常工作。

例如：

错误：

<TextField
    label={label}
    value={state.inputValue}
    InputProps={{
        endAdornment: (
            <InputAdornment position='end'>
                <IconButton style={{ padding: '3px' }}>
                    {state.inputValue?.length > 1 ? (
                        <ClearIcon onClick={handleClear}/>
                    ) : (
                        <DateRangeIcon onClick={onAdornmentClick}/>
                    )}
                </IconButton>
            </InputAdornment>
        ),
    }}
/>

解决方案：

<TextField
    label={label}
    value={state.inputValue}
    InputProps={{
        endAdornment: (
            <InputAdornment position='end' onClick={state.inputValue?.length > 1 ? handleClear : onAdornmentClick}>
                <IconButton style={{ padding: '3px' }}>
                    {state.inputValue?.length > 1 ? (
                        <ClearIcon/>
                    ) : (
                        <DateRangeIcon/>
                    )}
                </IconButton>
            </InputAdornment>
        ),
    }}
/>

- KARTHIKEYAN.A