reactJS材质的UI图标按钮来上传文件

问题描述

我想知道如何打开目录以使用IconButton上传文件吗?

I want to know how can I open the directory to upload a file using an IconButton?

<IconButton
  iconClassName="fa fa-plus-square"
  onClick={(e) => e.stopPropagation()}
  type='file'
/>

使用下面的代码显示图标按钮和另一个用于上传文件的按钮

using the code below shows the icon button and another button for the upload file

<IconButton iconClassName="fa fa-plus-square" onClick={(e) => e.stopPropagation()}>
    <input type="file type='file'>
</IconButton>

推荐答案

几件事:

1. 您不需要IconButton上的type='file'，只需输入

IconButton期望其子代不是SVGIcon，因此我建议您使用常规按钮

IconButton does not expect its children to be anything other than an SVGIcon, so I recommend that you use a regular button

在这种情况下，我不会调用stopPropagation

I wouldn't call stopPropagation in this case

输入道具中有一个错字.您有type="file type='file'.应该只是type="file"

You have a typo in your type prop for the input. You have type="file type='file'. It should just be type="file"

因此，将所有内容放在一起:

So, putting that all together:

<FlatButton label="Choose file" labelPosition="before">
  <input type="file" style={styles.exampleImageInput} />
</FlatButton>

如果您仍然希望它是图标而不是按钮，我怀疑您可以使用<input>进行操作，或者将其作为子项添加到FlatButton中，而无需标签.

If you still want it to be an icon rather than a button, I suspect you can do something with <input> or add it as the children to FlatButton with no label.

这篇关于reactJS材质的UI图标按钮来上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！