React中的事件

一、事件方法

• 方法的声明与事件的写法（this指针的问题）；
• 事件传参问题；
• 获取事件对象（传参与不传参）；
• 键盘事件；
• 在元素上设置自定义的属性

import React from 'react';
class Event extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:"我是消息"
        };
        //第三种修改在构造函数里面 直接修改this指针的问题
        this.btnClick3=this.btnClick3.bind(this)
    }
    //1.定义事件执行的方法
    btnClick1(){
        // console.log(this);  //undefined  使用第一种获取数据的方式，this为undefined，因为this不指当前事件的执行对象
        console.log(this);  //Event对象  使用第一种获取数据的方式，.bind(this)指将this指针绑给方法
        //通过this就可以操作当前组件
    }
    //直接获取this指针
    btnClick2=()=>{
        console.log(this.state.msg);
    }
    btnClick3(){
        console.log(this.state.msg);
    }
    //2.事件传参
    sendMsg1(a,b,c){
        console.log(a+"/"+b+"/"+c);
    }
    sendMsg2(d){
        console.log(d);
    }
    //3.获取事件对象
    getEvent1(e){
        //可以通过事件的对象 获取当前操作的dom元素对象
        console.log(e.target);
    }
    getEvent2(arg1,arg2,e){
        console.log(arg1,arg2,e);
    }
    //4.用户按键事件
    userPress=(e)=>{
        let keyv=e.which || e.keyCode;
        console.log(keyv);

        //5.在元素上设置自定义的属性
        //获取当前元素节点
        let ele=e.target || e.srcElement;
        //操作当前元素节点的属性（自定义属性等）
        console.log(ele.getAttribute("data-id"));
    }
    render() {
        return (
            

                {/* React里面的事件 */}
                {/* 修改该方法的this指针为当前组件的this */}
                第一种获取数据的方式
                第二种获取数据的方式
                第三种获取数据的方式
                

                {/* 调用事件传参问题 (不论事件为以上三种写法之一，传参问题均这样写)*/}
                调用事件传参1
                调用事件传参2
                

                {/* 事件对象在没有传参时候的获取方式 */}
                获取事件对象1
                {/* 事件对象在传参时候的获取方式 */}
                获取事件对象2
                

                {/* 键盘事件的执行对象 */}
                
            
        );
    }
}
export default Event;

二、表单事件
通过监听onChange事件,获取到它的值，再设置它的值，实现数据的双向绑定

import React from 'react';
class Form extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            id:"",
            pwd:""
        };
    }
    login=(e)=>{
        //阻止表单提交
        e.preventDefault();
    }
    changeId=(e)=>{
        //获取当前元素节点
        let ele=e.target;
        let val=ele.value;
        //react中设置数据  使用setState
        this.setState({
            id:val
        });
    }
    changepwd=(e)=>{
        //获取当前元素节点
        let ele=e.target;
        let val=ele.value;
        //react中设置数据  使用setState
        this.setState({
            pwd:val
        });
    }
    render() {
        return (
            

                我是表单组件
                

                

                    

                        {/* 
                            在文本框输入了值，用户看到自己输入的值，但其实是通过监听事件获取到它的值，把值设置给state里的id，id再绑给value
                            需监听（onChange）+设值（setState），不设置则不能进行文本框的输入 
                        */}
                        
账号：
                        
密码：
                        
登录
                    
            
                
            
        );
    }
}
export default Form;

知识点：
ref获取dom元素节点：
（1）先给元素设置ref=“name”；
（2）在去直接写this.refs.name.value

import React from 'react';
class Refs extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    getEle=()=>{
        let ele=this.refs.block;
        console.log(ele);
    }
    render() {
        return (
            

                {/* 获取refs  dom元素节点 */}
                

                获取dom元素节点
                

            
        );
    }
}
export default Refs;