Comment utiliser ref dans React : 1. Utilisez-le sous forme de fonction de rappel, le code est du type "export default class UserAdd extends Component{...}" 2. Utilisez-le sous forme de chaîne ; , le code est du type "export...".
L'environnement d'exploitation de ce tutoriel : Système Windows 7, version React16, cette méthode convient à toutes les marques d'ordinateurs.
Recommandé : "Tutoriel de base de Javascript"
Deux façons d'utiliser ref dans React
Il existe deux types de référence Utilisation
Formulaire de fonction de rappel (recommandation officielle)
Formulaire de chaîne
Première méthode Fonction de rappel form
Il existe trois méthodes de déclenchement pour la fonction de rappel form
Après le rendu du composant
Après la désinstallation du composant
Après la modification de la référence
🎜>
import React,{Component} from 'react' export default class UserAdd extends Component{ constructor(){ super(); } handleSubmit=()=>{ let name=this.name.value; console.log(name); } render(){ return( <form onSubmit={this.handleSubmit}> <div className="from-group"> <label htmlFor="name">姓名</label> <input type="text" className="form-control" ref={ref=>this.name=ref}/> </div> <div className="from-group"> <input type="submit" className="btn btn-primary"/> </div> </form> ) } }
import React,{Component} from 'react' export default class UserAdd extends Component{ constructor(){ super(); } handleSubmit=()=>{ let name=this.refs.name.value; console.log(name); } render(){ return( <form onSubmit={this.handleSubmit}> <div className="from-group"> <label htmlFor="name">姓名</label> <input type="text" className="form-control" ref="name"/> </div> <div className="from-group"> <input type="submit" className="btn btn-primary"/> </div> </form> ) } }
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!