ReactJS IconButton 在 Firefox 中不起作用答案

【问题标题】：ReactJS IconButton not working in FirefoxReactJS IconButton 在 Firefox 中不起作用
【发布时间】：2018-07-02 15:38:46
【问题描述】：

IconButton from Material UI的点击功能在FireFox的任何版本中都不起作用。这是我正在使用的代码：

<div className='floating-button visible-xs'>
  <IconButton touch={true} tooltipPosition="bottom-left">
    <Create className='floating-button-icon' onTouchTap={this.props.onProfileEdit}/>
  </IconButton>
</div>

有人知道如何解决这个问题吗？上面的代码 100% 在 Chrome 和 Safari 中工作。

【问题讨论】：

试试onClick 而不是onTouchTap。
github.com/mui-org/material-ui/issues/6725
@MayankShukla @karthik 我已经将其更改为onClick，但仍然没有运气。这对我不起作用。我们有其他选择吗？

标签： javascript reactjs onclick cross-browser material-ui

【解决方案1】：

请使用onClick prop 而不是onTouchTap 并将其应用于IconButton 组件本身而不是特定图标。

<div className='floating-button visible-xs'>
  <IconButton touch={true} tooltipPosition="bottom-left" onClick={this.props.onProfileEdit}>
    <Create className='floating-button-icon' />
  </IconButton>
</div>

【讨论】：

哇。谢谢@falinsky。它对我有用。但顺便说一句，它在这个上不起作用：<form onSubmit={(e)=>this._handleSubmit(e)}> <FlatButton label="Choose an Image" labelPosition="before" onChange={(e)=>this._handleImageChange(e)}> <input type="file" style={styles.imageInput}/> </FlatButton> </form>
@zuma 您可以看到使用 IconButton 与输入配对或键入 file: material-ui.com/demos/buttons/#contained-buttons 的示例
我通过添加containerElement='image' 修复了上面的FlatButton 问题。 <form onSubmit={(e)=>this._handleSubmit(e)}> <FlatButton containerElement='image' label="Choose an Image" labelPosition="before" onChange={(e)=>this._handleImageChange(e)}> <input type="file" style={styles.imageInput}/> </FlatButton> </form>