Material-ui: [FlatButton]ファイル入力がボタンで機能しません。

バージョン0.7.5では。

@nschaubeckドキュメントサイトのボタンは機能しますか？

@ hai-ceaはい。 ボタン要素が子をレンダリングしていなかったように、 <input>要素_in_DOMさえなかったように見えました。

私もこの問題を抱えています。 @nschaubeck解決策を見つけたことがありますか？

@ e-monson私は実際に解決策を見つけることができませんでした。

これはうまくいきます！
styles = {
exampleImageInput：{
カーソル： 'ポインタ'、
位置： '絶対'、
上：「0」、
下：「0」、
右：「0」、
左：「0」、
幅：「100％」、
不透明度： '0'
}
}

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

@nikhildaga入力フィールドをボタンに配置することは、W3C仕様の一部ではないため、Chromeでのみ機能します。

別の解決策は、ボタンを非表示の入力フィールドのクリックイベントを発生させるだけにすることです。

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でのみ機能します。 （ベータ15-0.2の場合も同様です）

htmlForのように<FlatButton> （または<RaisedButton> ）に設定し、入力ファイルにIDを設定できれば、それだけでいいのではないでしょうか。 クリックを手動でトリガーする必要はありません...
ボタンをラベルでラップしてみましたが、残念ながら機能しません:(

現在、 @ Wofielが最善の解決策のようです。

ネイティブソリューションがないのになぜこれを閉じるのか

こんにちは@Wofielステートレスコンポーネントで参照なしでこのテクニックを使用することをどのように提案しますか

@excalliburbdidとJqueryを使用できます。これは機能するはずです。

@Birssan domの操作は反応しますか？ それは大丈夫ですか？

通常はお勧めしませんが、この場合は問題ないはずのクリックイベントをトリガーすると思います

@Wofielバージョン15でできるように反応しますか？

@Wofielこのソリューションconsole.log(e.target.value) 1つ受け取る
C：\ fakepath \ imagefilename.png
最善の解決策は
e.target.files [0]

他の誰かがこの問題に遭遇した場合、 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; dr

<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ベータブランチを使用していますが、以下は機能しません

                        <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.

誰かが回避策を知っていますか？ とにかく、そのような一般的なユースケースはネイティブにサポートされるべきではありませんか？ （ハッキーではない方法で）

@ 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>