javascript - 如何使按钮成为 React with Material-UI 中隐藏输入的标签？

Question

所以，我想创建一个按钮来更改我的应用程序中的头像。我使用隐藏文件输入并希望将一个按钮作为它的标签，因此用户将单击一个按钮并选择头像而不是输入文件输入。这是我的代码：

<Grid container spacing={2} direction="column" className={classes.avatarArea}>
  <Grid item>
    <Avatar alt={getCookie("name")} src={avatar} className={classes.avatar}>{getCookie("name").charAt(0)}</Avatar>
  </Grid>
  <Grid item>
    <Input
      style={{ display: 'none' }}
      id="avatar-file-input"
      type="file"
      accept="image/*"
      onChange={uploadAvatar} />
    <label htmlFor="avatar-file-input">
      <Button variant="contained" color="primary" className={classes.iconButton} startIcon={<CloudUploadIcon />}>Change avatar</Button>
    </label>
  </Grid>
</Grid>

但是，按钮不能用作标签。如果我用例如头像更改按钮（这样用户需要单击头像来更改它），一切都很好。所以，似乎问题出在按钮本身。
如何将按钮设置为输入的标签？

标签： javascriptreactjsmaterial-ui