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  使用<button onClick={this.btnClick}>第一种获取数据的方式</button>，this为undefined，因为this不指当前事件的执行对象
        console.log(this);  //Event对象  使用<button onClick={this.btnClick.bind(this)}>第一种获取数据的方式</button>，.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 (
            <div>
                {/* React里面的事件 */}
                {/* 修改该方法的this指针为当前组件的this */}
                <button onClick={this.btnClick1.bind(this)}>第一种获取数据的方式</button>
                <button onClick={this.btnClick2}>第二种获取数据的方式</button>
                <button onClick={this.btnClick3}>第三种获取数据的方式</button>
                <hr/>
                {/* 调用事件传参问题 (不论事件为以上三种写法之一，传参问题均这样写)*/}
                <button onClick={this.sendMsg1.bind(this,1,2,3)}>调用事件传参1</button>
                <button onClick={this.sendMsg2.bind(this,[4,5,6])}>调用事件传参2</button>
                <hr/>
                {/* 事件对象在没有传参时候的获取方式 */}
                <button onClick={this.getEvent1}>获取事件对象1</button>
                {/* 事件对象在传参时候的获取方式 */}
                <button onClick={this.getEvent2.bind(this,1,2)}>获取事件对象2</button>
                <hr/>
                {/* 键盘事件的执行对象 */}
                <input type="text" onKeyPress={this.userPress} data-id="1,2,3"/>
            </div>
        );
    }
}
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 (
            <div>
                我是表单组件
                <hr/>
                <form action="" method="get">
                    <ul>
                        {/* 
                            在文本框输入了值，用户看到自己输入的值，但其实是通过监听事件获取到它的值，把值设置给state里的id，id再绑给value
                            需监听（onChange）+设值（setState），不设置则不能进行文本框的输入 
                        */}
                        <li><label htmlFor="id">账号：</label><input type="text" value={this.state.id} onChange={this.changeId} name="id"/></li>
                        <li><label htmlFor="pwd">密码：</label><input type="text" value={this.state.pwd} onChange={this.changepwd} name="pwd"/></li>
                        <li><button onClick={this.login}>登录</button></li>
                    </ul>            
                </form>
            </div>
        );
    }
}
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 (
            <div>
                {/* 获取refs  dom元素节点 */}
                <hr/>
                <button onClick={this.getEle}>获取dom元素节点</button>
                <div ref="block"></div>
            </div>
        );
    }
}
export default Refs;

来源：CSDN

作者：易安_小葵坤

链接：https://blog.csdn.net/weixin_43675447/article/details/89068945