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;Salin selepas log masuk
代码解读：
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;Salin selepas log masuk
下拉选择框
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;Salin selepas log masuk
代码解读:
请注意，Coconut选项最初由于selected属性是被选中的。在React中，并不使用之前的selected属性，而在根select标签上用value属性来表示选中项。这在受控组件中更为方便，因为你只需要在一个地方来更新组件。
总之，,