Cet article vous apporte une introduction à l'utilisation des éléments du formulaire React (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. aide.
Aujourd'hui, nous allons parler des éléments de formulaire de réaction.
Élément contrôlé
Voyons comment obtenir la valeur de la zone de saisie
import React, { Component } from 'react';
class Trem extends React.Component {
constructor(props){
super(props);
this.inp = this.inp.bind(this);
this.sub = this.sub.bind(this);
this.state = {
place:"请输入...",
inputV:''
}
};
inp(e){
this.setState({
inputV:e.target.value {/* 通过事件细节改变inputV的值*/}
});
console.log(e.target.value)
};
sub(){
console.log(this.state.inputV)
};
render(){
return (
<div>
<input type="text" onChange={this.inp} placeholder={this.state.place} value={this.state.inputV}/>
<br/>
<button onClick={this.sub}>{this.props.main}</button>{/*此处的main是来自父组件的传值*/}
</div>
)
}
}
export default Trem;Interprétation du code :
ce .inp = this.inp.bind(this); Lier la fonction inp this pour qu'elle pointe vers
this.state Initialiser la variable
inp() Surveiller la valeur d'entrée de l'entrée
this.state.inputV Obtenez la valeur de l'entrée via l'affectation
balise textarea
import React, { Component } from 'react';
class Trem extends React.Component {
constructor(props){
super(props);
this.inp = this.inp.bind(this);
this.sub = this.sub.bind(this);
this.state = {
place:"请输入...",
inputV:''
}
};
inp(e){
this.setState({
inputV:e.target.value
});
console.log(e.target.value)
};
sub(){
console.log(this.state.inputV)
};
render(){
return (
<div>
<textarea type="text" onChange={this.inp} placeholder={this.state.place} value={this.state.inputV}/>
<br/>
<button onClick={this.sub}>{this.props.main}</button>
</div>
)
}
}
export default Trem;Boîte de sélection déroulante
import React, { Component } from 'react';
class Trem extends React.Component {
constructor(props){
super(props);
this.select = this.select.bind(this);
this.state = {
selectV:'coconut'
}
};
select(e){
this.setState({
selectV:e.target.value
});
console.log(e.target.value)
};
render(){
return (
<div>
<select value={this.state.selectV} onChange={this.select}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
<br/>
</div>
)
}
}
export default Trem;Interprétation du code :
Veuillez noter que l'option Noix de coco est initialement sélectionnée en raison de l'attribut sélectionné. Dans React, l'attribut sélectionné précédent n'est pas utilisé, mais l'attribut value est utilisé sur la balise de sélection racine pour représenter l'élément sélectionné. Ceci est plus pratique dans les composants contrôlés, car il vous suffit de mettre à jour le composant à un seul endroit.
En bref, ,