Formulaire avec material-ui

Question

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

Answer 1

Ajouter type="submit" à un élément de bouton Material UI, tel qu'un RaisedButton et il fonctionnera comme un bouton de soumission lorsqu'on cliquera dessus. Lorsque le formulaire est soumis, il déclenche la fonction onSubmit sur le formulaire et exécute la fonction handleSubmit rappel.

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

Answer 2

Le mieux est d'apprendre à utiliser des formulaires avec react, puis de passer au matériel une fois que vous aurez maîtrisé cette partie.

Voici un bon tutoriel de react qui inclut la soumission d'un formulaire :

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

Code de référence :

Fonction de rendu - Noter le gestionnaire d'événement 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 callback

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 material-ui en convertissant les éléments d'entrée en TextField

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

Et utilisez les fonctionnalités intéressantes de ce logiciel.

Tous les détails de ce fonctionnement sont couverts par le tutoriel

J'espère que cela vous aidera - bonne chance !

Answer 3

L'événement que vous recherchez est onTouchTap et nécessite l'installation du logiciel react-tap-event-plugin . Les instructions correspondantes peuvent être consultées à l'adresse suivante aquí en haut de la page.

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

J'espère que cela vous aidera.