React表單元素的用法介紹（附程式碼）
javascript
這篇文章帶給大家的內容是關於React表單元素的用法介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
今天來講react的表單元素。
受控元素
下面來看如何取得輸入框的值
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指向
this.state 初始化變數
inp() 監聽input的輸入值
this.state.inputV 透過賦值取得input的value
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;登入後複製
程式碼解讀:
請注意，Coconut選項最初由於selected屬性是被選中的。在React中，並不使用先前的selected屬性，而在根select標籤上用value屬性來表示選取項目。這在受控組件中更為方便，因為你只需要在一個地方來更新組件。
總之，,