Material-ui: [FlatButton] Dateieingabe funktioniert nicht mit Button.

Auf Version 0.7.5.

@nschaubeck Funktioniert der Button auf der Doc-Seite bei dir?

@hai-cea Ja, das tut es. Es schien, als gäbe es nicht einmal ein <input> -Element _in_ DOM, als würde das Button-Element seine untergeordneten Elemente nicht rendern.

Ich habe dieses Problem auch. @nschaubeck Hast du schon mal eine Lösung gefunden?

@e-monson Ich konnte eigentlich keine Lösung finden.

das funktioniert!
Stile lassen = {
exampleImageInput: {
Cursor: 'Zeiger',
Position: 'absolut',
oben: '0',
unten: '0',
rechts: '0',
links: '0',
Breite: '100%',
Deckkraft: '0'
}
}

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

@nikhildaga Das funktioniert nur in Chrome, da das Platzieren von Eingabefeldern in Schaltflächen nicht Teil der W3C-Spezifikation ist.

Eine andere Lösung besteht darin, die Schaltfläche nur das Klickereignis eines versteckten Eingabefelds auslösen zu lassen.

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

Ich sehe, dass dieses Problem immer noch nicht richtig behoben wurde ...
Die im Dokument vorgeschlagene Lösung funktioniert nur in Chrome, wie @Wofiel sagte. (in Beta 15-0.2 immer noch der Fall)

Wäre es nicht besser, wie ein htmlFor auf <FlatButton> (oder <RaisedButton> ) setzen zu können, eine ID auf die Eingabedatei setzen und das wäre alles? Sie müssten den Klick nicht manuell auslösen ...
Ich habe versucht, den Button in das Etikett einzuwickeln, das funktioniert leider nicht :(

Im Moment scheint @Wofiel die beste Lösung zu sein.

Warum dies schließen, wenn es keine native Lösung gibt

Hallo @Wofiel , wie schlagen Sie vor, diese Technik ohne Refs in einer zustandslosen Komponente zu verwenden?

@excalliburbd Sie können id und Jquery verwenden, das sollte funktionieren

@Birssan Dommanipulation in Reaktion? ist das in Ordnung?

Ich würde es normalerweise nicht empfehlen, aber ich denke, ein Klickereignis auszulösen, das in diesem Fall in Ordnung sein sollte

@Wofiel Wie kann man mit Version 15 reagieren?

@Wofiel mit dieser Lösung bekommt man console.log(e.target.value)
C:\fakepath\imagefilename.png
Beste Lösungen ist
e.target.files[0]

Wenn jemand anderes auf dieses Problem stößt, habe ich festgestellt, dass Sie containerElement auf RaisedButton so einstellen können, dass es besser geeignet ist, ein Eingabeelement als Kind zu haben. Zum Beispiel ein Etikett ;-)

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

@Thomas101 Danke! Ich bin gerade auf dieses Problem gestoßen und Ihre Lösung scheint zu funktionieren.
Fantastisch :)

@Thomas101 Danke für den Tipp. Dies löste auch mein Problem. Das Tatsächliche

Nur um die Antwort von @Thomas101 zu ergänzen, wenn ich die Komponenten wie in seinem Beispiel deklariere, wird mein RaisedButton mit einer darin enthaltenen Dateieingabe gerendert. Um dies zu verhindern, setzen Sie einfach den Dateieingabestil auf display: none . :)

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

@andreyluiz unter welchen Umständen funktioniert das nicht:

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

Ich konnte kein Problem mit dem Beispiel der Dokumentseite finden, aber offensichtlich haben viele andere dieses Problem!

Soll die Dateieingabe nicht mit dem von Ihnen bereitgestellten Code angezeigt werden?

Das ist seltsam. In meinem Fall wird eine Dateieingabe innerhalb der Material-UI-Schaltfläche gerendert.

@andreyluiz Ja, mit dem Beispiel der Dokumentationsseite (http://www.material-ui.com/#/components/raised-button) ist kein <input> sichtbar. Mit welchem ​​Browser und welcher Version testest du?

Die neueste Chrome-Version.

Ich stimme @andreyluiz zu, der zeigt auch, aber mit einem style={{display: 'none'}} funktioniert es wie ein Zauber !

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>

Die obige Lösung scheint nicht mehr zu funktionieren. Ich verwende den neuen v1-Beta-Zweig und Folgendes funktioniert bei mir nicht

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

Ich bekomme in der Konsole folgenden Fehler:

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.

Kennt jemand einen Workaround? Wie auch immer, sollte ein so häufiger Anwendungsfall nicht nativ unterstützt werden? (auf eine nicht hackige Art)

@AdityaAnand1 der folgende Code sollte funktionieren

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