本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于React表单元素的用法介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。今天来讲讲react的表单元素。
受控元素
下面来看一下如何获取输入框的值
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 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>
<input 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;
|
代码解读:
this.inp = this.inp.bind(this); 绑定inp函数this指向
this.state 初始化变量
inp() 监听input的输入值
this.state.inputV 通过赋值获取input的value
textarea 标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 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;
|
下拉选择框
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 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属性来表示选中项。这在受控组件中更为方便,因为你只需要在一个地方来更新组件。
总之,<input type="text">, <textarea>, 和 <select> 都十分类似 - 他们都通过传入一个value属性来实现对组件的控制。
多个输入的解决方法
当你有处理多个受控的input元素时,你可以通过给每个元素添加一个name属性,来让处理函数根据 event.target.name的值来选择做什么。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | import React,{Component} from 'react' ;
class More extends React.Component {
constructor(props){
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
};
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
console.log(event.target.checked,event.target.value)
};
render(){
return (
<form>
<label>
Is going:
<input name= "isGoing" type= "checkbox" checked={this.state.isGoing} onChange={this.handleInputChange} />
</label>
<br />
<label>
Number of guests:
<input name= "numberOfGuests" type= "number" value={this.state.numberOfGuests} onChange={this.handleInputChange} />
</label>
</form>
)
}
}
export default More;
|
代码解读:
es6计算属性名语法
源码地址:https://github.com/Nick091608...
【相关推荐:react视频教程】
以上就是React表单元素的用法介绍(附代码)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript是一种运行在什么语言
javascript怎么去掉页眉页脚
javascript数组如何删除相同元素
javascript如何改变背景色
javascript有几种方式为元素添加事件
javascript怎么实现秒转时间
javascript中如何使用prompt方法
javascript中blur的用法是什么
javascript怎么修改浏览器title
用javascript获取伪元素(pseudo-element)属性的方法详解
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » React表单元素的用法介绍(附代码)