目录
一、事件的方法
1.1 方法的声明和事件的写法
绑定事件有三种方法,要考虑this的指向
import React,{Component} from "react"
class Event extends Component {
constructor(props) {
super(props);
this.state = {
msg:"我是Event组件",
};
this.btnclick3=this.btnclick3.bind(this);
}
//定义事件执行的方法
btnclick1(){
console.log(this)
}
//箭头函数
btnclick2=()=>{
console.log(this)
}
btnclick3(){
console.log(this)
}
render() {
return (
<div>
{this.state.msg}
<button onClick={this.btnclick1.bind(this)}>第一种获取数据的方式</button>
<button onClick={this.btnclick2}>第二种获取数据的方式</button>
<button onClick={this.btnclick3}>第三种获取数据的方式</button>
</div>
);
}
}
export default Event;
1.2 事件传参
传一般值,传数组
import React,{Component} from "react"
class Event extends Component {
constructor(props) {
super(props);
this.state = {
msg:"我是Event组件",
};
}
//调用事件传参
SendMsg(a,b,c){
console.log(a,b,c)
}
SendMsg2(a){
console.log(a)
}
render() {
return (
<div>
{this.state.msg}
<button onClick={this.SendMsg.bind(this,1,2,3)}>调用事件传参</button>
<button onClick={this.SendMsg2.bind(this,[1,2,3])}>调用事件传数组</button>
</div>
);
}
}
export default Event;
1.3 获取事件对象
调用事件对象,可以获取当前操作的dom元素对象
包括传参时获取事件对象和不传参获取事件对象
import React,{Component} from "react"
class Event extends Component {
constructor(props) {
super(props);
this.state = {
msg:"我是Event组件",
};
}
//获取事件对象 通过事件对象可以获取当前操作的dom元素对象
getevent(e){
console.log(e)
}
//事件对象在参数最后
eventsmg(a,b,c,e){
console.log(a,b,c,e)
}
render() {
return (
<div>
{this.state.msg}
<button onClick={this.getevent}>不传参时获取事件对象</button>
<button onClick={this.eventsmg.bind(this,1,2,3)}>传参时获取事件对象</button>
</div>
);
}
}
export default Event;
1.4 键盘事件
import React,{Component} from "react"
class Event extends Component {
constructor(props) {
super(props);
this.state = {
msg:"我是Event组件",
};
}
//键盘事件
keydown=(e)=>{
// FireFox或Opera中,隐藏的变量e是存在的,那么e||event返回e,如果在IE中,隐藏变量e是不存在则返回event let e=e||event;
//FireFox或Opera,事件对象e.witch IE e.keyCode
let ekey=e.keyCode||e.which;
console.log(ekey)
}
render() {
return (
<div>
{this.state.msg}
<input type="text" onKeyPress={this.keydown}/>键盘事件
</div>
);
}
}
export default Event;
1.5 React 实现数据双向
React 实现类似于vue的数据双向绑定:绑定value值 绑定事件监听onChange获取修改的value值,最后再将state中的值传给value。
super()改变this指向
setstate 来存放数据
使用setState()方法 设置数据
onChange监听value值的改变
e.preventDefault()阻止默认行为
import React,{Component} from "react"
class From extends Component {
constructor(props) {
super(props);
this.state = {
msg:"我是From组件",
id:"",
pwd:""
};
}
login=(e)=>{
//可以阻止提交
e.preventDefault();
}
//监听
changeId=(e)=>{
//获取当前操作的元素
//react 使用setState()方法 设置数据
this.setState({
id:e.target.value
})
}
changepwd=(e)=>{
this.setState({
pwd:e.target.value
})
}
render() {
return (
<div>
{this.state.msg}
<form method="get">
<ul>
{/* htmlFor类似于HTML中for 这个属性规定 label 与哪个表单元素绑定。 */}
<li><label htmlFor="id">账号:</label><input name="id" type="text" onChange={this.changeId} value={this.state.id}></input></li>
<li><label htmlFor="pwd">密码:</label><input name="pwd" type="text" onChange={this.changepwd} value={this.state.pwd}></input></li>
<li><input type="submit" /></li>
</ul>
</form>
</div>
);
}
}
export default From;
知识点补充:form表单中method的get和post区别
一、get和post定义
form元素的method属性用来指定发送form的http方法;
使用get时,form数据集被附加到form元素的action属性所指定的URL后面;
使用post时,form数据集被包装在请求的body中并被发送。
使用get提交方式,生成URL:user.do?loginId=abc
get仅仅是拼接一个URL,然后直接向服务区请求数据,需要提交给服务器的数据集包含在URL中。
使用post提交方式,生成URL:user.do
post会把form的数据集,即loginId=abc这个键值对包装在请求的body中,发给服务器,然后向服务器请求数据。
对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。Request从几个集合取数据是有顺序的,从前到后的顺序依次是 QueryString,Form,最后是ServerVariables。Request对象按照这样的顺序依次搜索这几个集合中的变量,如果有符合的就中止,后面的就不管了。
1.6 ref获取DOM元素节点
ref一共有两种使用方式
- 回调函数形式(官方推荐)
- string形式
第一种 回调函数形式
回调函数形式一共有三种触发方式
- 组件渲染后
- 组件卸载后
- ref改变后
import React,{Component} from 'react'
export default class UserAdd extends Component{
constructor(){
super();
}
handleSubmit=()=>{
let name=this.name.value;
console.log(name);
}
render(){
return(
<form onSubmit={this.handleSubmit}>
<div className="from-group">
<label htmlFor="name">姓名</label>
<input type="text" className="form-control" ref={ref=>this.name=ref}/>
</div>
<div className="from-group">
<input type="submit" className="btn btn-primary"/>
</div>
</form>
)
}
}
第二种 字符串的形式 使用时用this.refs.string
- 先给元素设置ref="name
- 再需要获取的地方写 this.refs.name.value
注意:若俩个ref="name",则获取的是最后一个
import React,{Component} from 'react'
export default class UserAdd extends Component{
constructor(){
super();
}
handleSubmit=()=>{
let name=this.refs.name.value;
console.log(name);
}
render(){
return(
<form onSubmit={this.handleSubmit}>
<div className="from-group">
<label htmlFor="name">姓名</label>
<input type="text" className="form-control" ref="name"/>
</div>
<div className="from-group">
<input type="submit" className="btn btn-primary"/>
</div>
</form>
)
}
}