Material-ui: [FlatButton] 文件输入不适用于按钮。

在 0.7.5 版上。

@nschaubeck文档网站上的按钮对您有用吗？

@hai-cea 是的。 似乎甚至没有<input>元素 _in_ DOM，就像按钮元素没有渲染它的子元素一样。

我也有这个问题。 @nschaubeck你找到解决方案了吗？

@e-monson 我实际上找不到解决方案。

这行得通！
让样式 = {
示例图像输入：{
光标：'指针'，
位置：'绝对'，
顶部：'0'，
底部：'0'，
对：'0'，
左：'0'，
宽度：'100%'，
不透明度：'0'
}
}

      <FlatButton label="Choose an Image" primary={true}>
        <input id="imageButton" style={styles.exampleImageInput} type="file"></input>
      </FlatButton>

@nikhildaga这仅适用于 Chrome，因为将输入字段放入按钮不是 W3C 规范的一部分。

另一种解决方案是使按钮仅触发隐藏输入字段的单击事件。

handleChange: function(e){
  console.log(e.target.value)
},
_openFileDialog: function(){
  var fileUploadDom = React.findDOMNode(this.refs.fileUpload);
  fileUploadDom.click();
},
render: function() {
  return (
    <FlatButton
      label="Upload file"
      onClick={this._openFileDialog}/>
    <input
      ref="fileUpload"
      type="file" 
      style={{"display" : "none"}}
      onChange={this._handleChange}/>
  );
}

我看到这个问题仍然没有正确解决......
正如@Wofiel所说，文档中提出的解决方案仅适用于 Chrome。 （在 beta 15-0.2 中仍然如此）

能够将htmlFor设置为<FlatButton> （或<RaisedButton> ），将 Id 设置为输入文件，这不是更好吗？ 您无需手动触发点击...
我尝试将按钮包装在标签中，不幸的是，这不起作用:(

现在@Wofiel似乎是最好的解决方案。

为什么在没有本机解决方案时关闭它

嗨@Wofiel ，您如何建议在无状态组件中使用这种没有参考的技术

@excalliburbd您可以使用id和Jquery，应该可以

@Birssan dom 操纵反应？ 这样可以吗？

我通常不会推荐它，但我认为触发在这种情况下应该没问题的点击事件

@Wofiel版本 15 可以做反应吗？

@Wofiel使用此解决方案console.log(e.target.value)一个收到
C:\fakepath\imagefilename.png
最好的解决方案是
e.target.files[0]

如果其他人遇到此问题，我发现您可以将 RaisedButton 上的RaisedButton containerElement设置为更适合作为孩子使用输入元素的东西。 例如标签;-)

<RaisedButton
  containerElement='label' // <-- Just add me!
  label='My Label'>
    <input type="file" />
</RaisedButton>

@Thomas101谢谢！ 我刚刚遇到这个问题，您的解决方案似乎有效。
惊人的 ：）

@Thomas101感谢您的提示。 这也解决了我的问题。 实际上

只是补充@Thomas101的答案，当我像他的示例一样声明组件时，我的 RaisedButton 会在内部使用文件输入呈现。 为了防止这种情况，只需将文件输入样式设置为display: none 。 :)

<RaisedButton
  containerElement='label' // <-- Just add me!
  label='My Label'>
    <input type="file" style={{ display: 'none' }} />
</RaisedButton>

@andreyluiz在什么情况下这不起作用：

<RaisedButton label='My Label'>
    <input type="file" />
</RaisedButton>

我无法在文档站点示例中找到问题，但显然许多其他人都有这个问题！

文件输入是否与您提供的代码一起显示？

这很奇怪。 在我的例子中，它在 material-ui 按钮内呈现一个文件输入。

@andreyluiz是的，对于文档站点示例（http://www.material-ui.com/#/components/raised-button），没有可见的<input> 。 您正在测试什么浏览器和版本？

最新的 Chrome 版本。

我同意@andreyluiz ， 也显示了，但是使用style={{display: 'none'}} ，它就像一个魅力！

tl;博士

<RaisedButton
  containerElement="label"
  icon={<Icons.FileUpload />} // material-ui-icons
  labelColor="white"
  primary
  style={{ minWidth: 40, width: 40 }}>
  <input
    onChange={e => this.upload(e.target.files[0])}
    style={{ display: 'none' }}
    type="file"
  />
</RaisedButton>

上述解决方案似乎不再起作用。 我正在使用新的 v1 beta 分支，以下对我不起作用

                        <Button dense
                                containerElement="label"
                                label="label">
                            <input
                                onChange={e => this.upload(e.target.files[0])}
                                style={{display: 'none'}}
                                type="file"
                            />
                        </Button>

我在控制台中收到以下错误：

Warning: React does not recognize the `containerElement` prop on a DOM element.
If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `containerelement` instead.
If you accidentally passed it from a parent component, remove it from the DOM element.

有人知道解决方法吗？ 无论如何，不​​应该原生支持这样一个常见的用例吗？ （以一种非hacky的方式）

@AdityaAnand1以下代码应该可以工作

<Button
            raised
            component="label" <---- use component instead of containerElement
            color="primary"
            className={buttonClassname}
            disabled={this.state.loading}
            onClick={this.handleButtonClick}
          >
            {'Upload'}
            <FileUpload className={classes.rightIcon} />
            <input
              onChange={e => console.log(e.target.files[0])}
              style={{ display: 'none' }}
              type="file"
            />
</Button>