React 양식 요소 사용 소개(코드 포함)
javascript
이 기사는 React 양식 요소(코드 포함)의 사용법을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.
오늘은 React Form 요소에 대해 이야기해보겠습니다.
제어 요소
입력 상자의 값을 가져오는 방법을 살펴보겠습니다
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;로그인 후 복사
코드 해석:
this.inp = this.inp.bind(this)를 가리키는 inp 함수를 바인딩합니다.
this.state 초기화 변수
inp() 입력의 입력값을 모니터링합니다.
this.state.inputV 할당을 통해 입력값을 가져옵니다.
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;로그인 후 복사
드롭다운 선택 상자
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;로그인 후 복사
코드 해석 :
코코넛 옵션은 원래 선택한 속성이 선택되었기 때문에 발생했다는 점을 참고하세요. React에서는 이전에 selected 속성을 사용하지 않지만, 루트 select 태그에 value 속성을 사용하여 선택한 항목을 나타냅니다. 한 곳에서만 구성 요소를 업데이트하면 되므로 제어된 구성 요소에서 더 편리합니다.
간단히 말하면 ,