一.获取执行事件的dom节点

run=(event)=>{    alert(event.target);/**获取执行事件的dom节点**/    //改变dom样式    event.target.style.background='red';    //获取dom属性    alert(event.target.getAttribute('id'));}

二.表单事件

点击按钮，获取input表单的值

{/* 获取表单的值                1、监听表单的改变事件                        onChange                2、在改变的事件里面获取表单输入的值           事件对象                3、把表单输入的值赋值给username              this.setState({})                4、点击按钮的时候获取 state里面的username     this.state.username                 */}

inputChange=(e)=>{        // console.log('111');        //获取表单的值        console.log(e.target.value);        this.setState({            username:e.target.value        })    }

getInput=()=>{        alert(this.state.username);    }

整体参考代码

/*事件对象  、键盘事件、 表单事件 、ref获取dom节点、React实现类似vue双休数据绑定事件对象:在触发DOM上的某个事件时,会产生一个事件对象event。这个对象中包含着所有与事件有关的信息*/import React from 'react';import '../assets/css/index.css';class Home extends React.Component{    // 子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象    constructor(props){        super(props);   //固定写法        this.state={            msg:'我是一个home组件',            username:''        }               }    run=(event)=>{        // alert(this.state.msg);        // console.log(event);        // alert(event.target);   /*获取执行事件的dom节点*/        event.target.style.background='red';        //获取dom的属性        alert(event.target.getAttribute('aid'))    }    inputChange=(e)=>{        // console.log('111');        //获取表单的值        console.log(e.target.value);        this.setState({            username:e.target.value        })    }    getInput=()=>{        alert(this.state.username);    }    render(){        return(            
    
                                                 {this.state.msg}               {/* 事件对象 */}               
     事件对象演示
               
                    
     
     
 
     
                
     表单事件
                {/* 获取表单的值                1、监听表单的改变事件                        onChange                2、在改变的事件里面获取表单输入的值           事件对象                3、把表单输入的值赋值给username              this.setState({})                4、点击按钮的时候获取 state里面的username     this.state.username                 */}                
      
                      
     
     
 
     
            
    
        )    }    }export default Home;

三.通过ref获取表单节点

ref（VUE中也有）

首先给dom取ref名字

通过this.refs.username 获取dom节点

inputChange=()=>{        /*           获取dom节点           1、给元素定义ref属性                          2、通过this.refs.username 获取dom节点        */        let val=this.refs.username.value;        this.setState({            username:val        })    }

整体参考代码

import React from 'react';class List extends React.Component {    constructor(props) {        super(props);        this.state = {             username:''         };    }    inputChange=()=>{        /*           获取dom节点           1、给元素定义ref属性                          2、通过this.refs.username 获取dom节点                */        let val=this.refs.username.value;        this.setState({            username:val        })    }    getInput=()=>{        alert(this.state.username);    }    //键盘事件    inputKeyUp=(e)=>{        console.log(e.keyCode);        if(e.keyCode==13){            alert(e.target.value);        }    }    inputonKeyDown=(e)=>{        console.log(e.keyCode);        if(e.keyCode==13){            alert(e.target.value);        }    }    render() {        return (            
    
                                       {/* 获取表单的值                1、监听表单的改变事件                        onChange                2、在改变的事件里面获取表单输入的值            ref获取                 3、把表单输入的值赋值给username              this.setState({})                4、点击按钮的时候获取 state里面的username     this.state.username                 */}                
      
                     
     
     
 
     
                                
     键盘事件
                
                     
     
     
                
                 
    
        );    }}export default List;

四.键盘事件

参考如上第三部分整体代码。

五.实现类似Vue的双向数据绑定

Model改变影响View

View改变反过来影响Model

首先input的value绑定state（只写这个会报错，提醒必须填写onchange方法。不报错需要填写成defaultvalue）

2.填写onchange方法

inputChange=(e)=>{        this.setState({            username:e.target.value        })    }

3.撒旦

整体代码

import React,{Component} from 'react';class Todolist extends Component {    constructor(props) {        super(props);        this.state = {             username:"111"        };    }    inputChange=(e)=>{        this.setState({            username:e.target.value        })    }    setUsername=()=>{        this.setState({            username:'李四'        })    }    render() {        return (            
                    
     双休数据绑定
                {/* model改变影响View    view改变反过来影响model  */}                
                     
      {this.state.username}
                              
                 
    
        );    }}export default Todolist;