Material-ui: [FlatButton] Input file tidak berfungsi dengan tombol.

Pada versi 0.7.5.

@nschaubeck Apakah tombol di situs dokumen berfungsi untuk Anda?

@hai-cea Ya benar. Sepertinya bahkan tidak ada elemen <input> _in_ DOM, seperti elemen tombol tidak merender turunannya.

Saya mengalami masalah ini juga. @nschaubeck Apakah Anda pernah menemukan solusi?

@e-monson Saya sebenarnya tidak dapat menemukan solusi.

ini bekerja!
biarkan gaya = {
contohGambarInput: {
kursor: 'penunjuk',
posisi: 'mutlak',
atas: '0',
bawah: '0',
kanan: '0',
kiri: '0',
lebar: '100%',
opasitas: '0'
}
}

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

@nikhildaga Itu hanya berfungsi di Chrome karena menempatkan bidang input ke dalam tombol bukan bagian dari spesifikasi W3C.

Solusi yang berbeda adalah membuat tombol hanya menjalankan acara klik dari bidang input tersembunyi.

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}/>
  );
}

Saya melihat masalah ini masih belum diperbaiki dengan benar...
Solusi yang diusulkan dalam dokumen hanya berfungsi di Chrome seperti yang dikatakan @Wofiel . (masih terjadi di beta 15-0,2)

Bukankah lebih baik untuk dapat mengatur seperti htmlFor ke <FlatButton> (atau <RaisedButton> ), mengatur Id ke file input dan hanya itu? Anda tidak perlu memicu klik secara manual...
Saya mencoba membungkus tombol di label, sayangnya, itu tidak berhasil :(

Saat ini @Wofiel tampaknya menjadi solusi terbaik.

Mengapa menutup ini ketika tidak ada solusi asli

hai @Wofiel bagaimana Anda menyarankan menggunakan teknik ini tanpa referensi dalam komponen stateless

@excalliburbd Anda dapat menggunakan id dan Jquery, yang seharusnya berfungsi

Manipulasi dom @Birssan dalam reaksi? Apakah itu tidak apa apa?

Saya biasanya tidak akan merekomendasikannya, tetapi saya pikir untuk memicu acara klik yang seharusnya baik-baik saja dalam kasus ini

@Wofiel Seperti yang dapat dilakukan dengan reaksi versi 15?

@Wofiel dengan solusi ini console.log(e.target.value) satu menerima
C:\fakepath\imagefilename.png
Solusi terbaik adalah
e.target.file[0]

Jika ada orang lain yang menemukan masalah ini, saya menemukan bahwa Anda dapat mengatur containerElement pada RaisedButton menjadi sesuatu yang lebih cocok untuk memiliki elemen input sebagai anak. Misalnya label ;-)

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

@Thomas101 Terima kasih! Saya baru saja mengalami masalah ini dan solusi Anda tampaknya berhasil.
Luar biasa :)

@Thomas101 Terima kasih atas tipnya. Ini memecahkan masalah saya juga. Sebenarnya

Hanya melengkapi jawaban @Thomas101 , ketika saya mendeklarasikan komponen seperti contohnya, RaisedButton saya dirender dengan input file di dalamnya. Untuk mencegahnya, cukup setel gaya input file ke display: none . :)

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

@andreyluiz dalam keadaan apa ini tidak berhasil:

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

Saya belum dapat menemukan masalah dengan contoh situs dokumen, tetapi jelas banyak orang lain yang memiliki masalah ini!

Apakah seharusnya input file tidak ditampilkan dengan kode yang Anda berikan?

Itu aneh. Dalam kasus saya ini membuat input file di dalam tombol material-ui.

@andreyluiz Ya, dengan contoh situs dokumen ( http://www.material-ui.com/#/components/raised-button ) tidak ada <input> yang terlihat. Browser & versi apa yang Anda uji?

Chrome versi terbaru.

Saya setuju dengan @andreyluiz , the menunjukkan juga, tetapi dengan style={{display: 'none'}} , ini berfungsi seperti pesona!

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>

Solusi di atas tampaknya tidak berfungsi lagi. Saya menggunakan cabang beta v1 baru dan yang berikut ini tidak berfungsi untuk saya

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

Saya mendapatkan kesalahan berikut di konsol:

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.

Ada yang tahu solusinya? Bagaimanapun, bukankah seharusnya kasus penggunaan yang umum seperti itu didukung secara asli? (dengan cara non-hacky)

@AdityaAnand1 kode berikut harus bekerja

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