web-dev-qa-db-fra.com

Forme avec matériel-ui

J'essaye de construire un formulaire simple dans material-ui avec le login et le mot de passe TextFields et un RaisedButton pour soumettre le formulaire. Quelle est la meilleure façon de gérer les événements sur le bouton RaisedButton et de soumettre le formulaire?

material-ui
4
kprim

Ajoutez type="submit" à un élément du bouton d'interface utilisateur Matériau, tel qu'un RaisedButton , et il fonctionnera comme un bouton d'envoi lorsque vous cliquez dessus. Lorsque le formulaire est soumis, il déclenche le onSubmit sur le formulaire et exécute le handleSubmit callback.

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.handleChange} />      
          <RaisedButton label="Submit" type="submit" />
        </form>
     )
  }
}
7
Adam Prax

L'événement que vous recherchez est onTouchTap et nécessite l'installation du react-tap-event-plugin. Vous trouverez les instructions à ce sujet ici en haut de la page. 

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

J'espère que cela t'aides.

2
Todd

Votre meilleur pari est d’apprendre à utiliser des formulaires avec react, puis de les convertir en matériau une fois que vous avez terminé cette partie.

Voici un bon tutoriel de React qui comprend la soumission d'un formulaire:

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

Code pertinent:

Fonction de rendu - Notez le gestionnaire d'événements sur le formulaire

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

Et voici l'implémentation du rappel

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: ''});

},

Vous pouvez convertir cet exemple en matériau-ui en convertissant les éléments en entrée en TextField.

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

Et utilisez les fonctionnalités intéressantes de celui-ci.

Tous les détails de ce fonctionnement sont abordés dans le tutoriel.

J'espère que ça aide - bonne chance!

1
Jeremy Bunn