Formular mit Material-Ui

Question

Ich versuche, ein einfaches Formular in Material-Ui mit Login und Passwort TextFields und einem RaisedButton, um das Formular zu senden. Was ist der beste Weg, um Ereignisse auf dem RaisedButton zu behandeln und das Formular zu senden?

Answer 1

Ihre beste Wette ist es, über die Verwendung von Formularen mit reagieren zu lernen, dann konvertieren Sie zu Material, sobald Sie diesen Teil haben.

ist hier ein gutes Tutorial von reagieren, dass enthält ein Formular abgeschickt:

https://facebook.github.io/react/docs/tutorial.html

Relevante Code: Funktion

Rendern - Notieren Sie sich die Event-Handler auf dem Formular

render: function() { 
return (
    <form className="commentForm" onSubmit={this.handleSubmit}> 
    <input 
     type="text" 
     placeholder="Your name" 
     value={this.state.author} 
     onChange={this.handleAuthorChange} 
    /> 
    <input 
     type="text" 
     placeholder="Say something..." 
     value={this.state.text} 
     onChange={this.handleTextChange} 
    /> 
    <input type="submit" value="Post" /> 
    </form> 
); 

Und hier ist die Implementierung des Rückrufs

handleSubmit: function(e) { 
e.preventDefault(); 
var author = this.state.author.trim(); 
var text = this.state.text.trim(); 
if (!text || !author) { 
    return; 
} 
// TODO: send request to the server 
this.setState({author: '', text: ''}); 

},

Sie diese Probe durch Umwandlung der Eingabeelemente zu TextField-

über Material-ui umwandeln kann die coolen Features davon

http://www.material-ui.com/#/components/text-field

und verwenden.

Alle Details, wie dies funktioniert im Tutorial

Hoffnung abgedeckt sind, das hilft - viel Glück!

Answer 2

Das Ereignis, das Sie suchen, ist onTouchTap und erfordert die Installation der react-tap-event-plugin. Die Anweisungen hierzu finden Sie oben auf der Seite unter here.

<RaisedButton label="Default" style={style} onTouchTap={yourEventHandler} /> 

Hoffe, das hilft.

Answer 3

Fügen Sie type="submit" zu einem Material-UI-Schaltflächenelement hinzu, z. B. RaisedButton, und es funktioniert als Absenden-Schaltfläche, wenn Sie darauf klicken. Wenn das Formular abgeschickt wird, löst es das onSubmit auf dem Formular aus und das handleSubmit Callback wird ausgeführt.

class MyForm extends React.Component { 
    constructor() { 
    super(); 
    this.state = {id: null}; 
    } 
    handleChange = (event) => { 
    this.setState({id: event.target.value}); 
    } 
    handleSubmit = (event) => { 
    //Make a network call somewhere 
    event.preventDefault(); 
    } 
    render() { 
    return( 
     <form onSubmit={this.handleSubmit}> 
      <TextField floatingLabelText="ID Number" onChange={this.change} />  
      <RaisedButton label="Submit" type="submit" /> 
     </form> 
    ) 
    } 
}