Dieser Artikel bietet Ihnen eine Einführung in die Verwendung von React-Formularelementen (mit Code). Freunde in Not können darauf verweisen. helfen.
Heute werden wir über Reaktionsformelemente sprechen.
Gesteuertes Element
Sehen wir uns an, wie man den Wert des Eingabefelds erhält
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;Codeinterpretation:
this.inp = this. inp.bind(this); Binden Sie die inp-Funktion this so, dass sie auf
this.state zeigt. Initialisieren Sie die Variable
inp(). Überwachen Sie den Eingabewert der Eingabe
this.state.inputV Wert der Eingabe durch Zuweisung
textarea tag
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;Dropdown-Auswahlfeld
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;Codeinterpretation:
Bitte beachten Sie, dass aufgrund des ausgewählten Attributs zunächst die Option Kokosnuss ausgewählt ist. In React wird das zuvor ausgewählte Attribut nicht verwendet, aber das Wertattribut wird im Root-Select-Tag verwendet, um das ausgewählte Element darzustellen. Dies ist bei kontrollierten Komponenten praktischer, da Sie die Komponente nur an einer Stelle aktualisieren müssen.
Kurz gesagt, ,