Material-UI按钮点击后消失答案

【问题标题】：Material-UI button disappears after clickMaterial-UI按钮点击后消失
【发布时间】：2019-03-25 17:11:34
【问题描述】：

我有一个按钮，点击后消失。同样单击按钮一次不会导致任何按钮操作运行。我必须单击按钮，然后在按钮消失后单击按钮所在的区域才能使按钮操作生效。

<Grid className={classes.container} style={{justifyContent: 'flex-end'}} item xs={12}>
            <Button className={classes.addImage} onClick={this.addPic}>
                <input 
                className={classes.takePic} 
                ref="file"
                id="takePic" 
                type="file" 
                accept="image/*"
                onChange={this.onChange}
                />
                Add 
                <br></br>
                Image

            </Button>
        </Grid>

样式：

 addImage: {
    display: 'flex',
    backgroundColor: 'black',
    color: 'white',
    borderRadius: 90,
    height: 100,
    width: 100,
    justifySelf: 'flex-end',
    marginRight: '12.5%',
},

onChange函数：

    onChange = () => {
    let newfile = this.refs.file.files[0];
    let reader = new FileReader();
    let url = reader.readAsDataURL(newfile);
    reader.onloadend = () => {
        this.setState({
            ...this.state,
            openModal: true,
            imgSrc : [reader.result],
            imageType: newfile.type,
            newfile: newfile,
            filename: `${this.props.user.id}_${Date.now()}`
        })
        console.log(newfile)
        console.log(this.state)

    }
}

addPic函数：

addPic = () => {
        document.getElementById('takePic').click()
    }

【问题讨论】：

this.addPic 和 this.onChange 是做什么的？我们可以看到功能吗？还是小提琴？
我编辑了我的帖子以包含这些功能。我没有将它们包含在原始帖子中，因为这个问题是在我创建这些函数之前发生的。
按钮标签内的输入标签？？
@G_S 既然你提到了它，输入不需要在按钮上。我会尝试移动它，看看是否能解决问题。
@tdammon 尝试您的链接时，该按钮不会消失。然而，有一个非常极端的悬停效果，使按钮非常轻。在移动设备上，有时第一次触摸会触发“悬停”（例如工具提示），然后第二次触摸会注册为单击，但我认为 Material-UI 按钮默认情况下不会以这种方式工作，我不能重现您描述的行为 - 我的第一次点击工作正常。

标签： javascript css reactjs material-ui

【解决方案1】：

在为 Material-UI 的 Button 覆盖颜色的 CSS 时必须小心。如果您在不遵循Button 中使用的模式的情况下覆盖颜色，则很容易在触摸设备上产生不良影响（尤其是“悬停”状态）。

以下是 Button 处理“文本”变体（默认）颜色的样式的例外：

export const styles = theme => ({
  /* Styles applied to the root element. */
  root: {
    color: theme.palette.text.primary,
    transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
      duration: theme.transitions.duration.short,
    }),
    '&:hover': {
      backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
      '&$disabled': {
        backgroundColor: 'transparent',
      },
    },
    '&$disabled': {
      color: theme.palette.action.disabled,
    },
  },
  /* Styles applied to the root element if `disabled={true}`. */
  disabled: {},
});

在addImage 类中，您将按钮的backgroundColor 更改为黑色，将color 更改为白色，但您不处理悬停时应该发生的情况。由于特殊性，Material-UI 的样式将赢得悬停，并且在触摸设备 ('@media (hover: none)') 上，背景将变得透明，但您将 color 更改为“白色”（而不是 theme.palette.text.primary）仍将在效果，如果您的页面背景是白色，则意味着您的按钮现在不可见。

您可以通过明确说明悬停时应该发生的情况来解决此问题，如我在此处的回答所示：How do I change the ripple background color on Button?。

Button 源代码（有关 Material-UI 样式的完整详细信息）：https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Button/Button.js

【讨论】：