React 事件

目录

 

一、事件的方法

1.1 方法的声明和事件的写法

1.2 事件传参

1.3 获取事件对象 

1.4 键盘事件

1.5 React 实现数据双向

1.6 ref获取DOM元素节点

 

---

一、事件的方法

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 

1. 先给元素设置ref="name
2. 再需要获取的地方写 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>
        )
    }

}