如何在 React 的图标按钮 (Material UI) 中使用 input type='text'？

Question

首先，请看我的代码。

我重写了我的代码以使其清晰。所以无需担心导入问题！

const test = () => {

    return (

        <label >
             <input type='file' multiple style={{ display: 'none' }} />
             <Tooltip title='Upload Files'>
                 <IconButton>
                     <AddBox color='primary' fontSize='large'/>
                 </IconButton>
             </Tooltip>
        </label>

    )
}

在这里，使用这段代码，我尝试在单击 IconButton 时打开 input type="text"。

不过好像没有变化。

我尝试了几种不同的方法，但效果不佳：/

仅供参考，这是我想代表输入类型使用的 AddBox 按钮的图片='text'。

我英语不好，请谅解！

期待您的来信！！

Answer 1

试试这个

const Test = () => {
  return (
    <label htmlFor='file'>
      <input
        id='file'
        type='file'
        multiple
        style={{ position: 'fixed', top: '-100em' }}
        onChange={e => console.log(e.target.files)}
      />
      <Tooltip title='Upload Files'>
        <IconButton component='span'>
          <RiAddBoxFill color='primary' fontSize='large' />
        </IconButton>
      </Tooltip>
    </label>
  );
};

我根据 Material UI 示例 (https://mui.com/components/buttons/#upload-button) 创建了此代码并且它已经过测试

备注：

label 中的 htmlFor 属性和 input 中的 id 属性用于连接两个元素，以便在值匹配时标签触发输入点击。看到这个：https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for（在普通 js 中我们使用 for 但在反应中我们使用 htmlFor 可能是因为 for 关键字是为 javascript for loop 保留的)
IconButton 需要 component='span' 道具（我不确定，默认情况下它使用按钮但是当我尝试时它未能触发输入点击，可能是因为按钮元素阻挡了标签元素)
编辑：在 Safari 中，当隐藏显示时输入被禁用：none。更好的方法是使用 position: fixed;顶部：-100em。资料来源：

编辑：要获取文件，请在输入元素上使用 onChange，代码已更新

如何在 React 的图标按钮 (Material UI) 中使用 input type='text'？

How can I use input type='text' in a Icon Button (Material UI) in React?

javascript

input

reactjs

material-ui