React学习笔记【7】

第九节

React事件

1. react事件：绑定事件的命名是驼峰命名法。第二个单词大写
2. {}传入一个函数，不能直接写字符串

事件对象

react返回的事件对象是代理的原生的事件对象
如果想要查看事件对象的具体值，必须直接输出事件对象的属性

注意：
原生阻止默认行为：return false;
React中阻止默认必须使用e.preventDefault()

React事件传参

通过一个匿名的箭头函数

---

本节代码

import React from 'react';
import ReactDOM from 'react-dom';

class ParentCom extends React.Component {
    constructor(props) {
        super(props);
    }
    parentEvent = (e) => {
        console.log(e);
        e.preventDefault();
    }
    parentEvent1 = (msg,e)=>{
        console.log(msg);
        console.log(e);
    }
    render() {
        return (
            <div>
                <form action="http://www.baidu.com">
                    <div className="child">
                        <h1>Hello world</h1>
                        <button onClick={this.parentEvent}>提交</button>
                    </div>
                </form>

                <button onClick={(e)=>this.parentEvent1('msg:hello',e)}>提交</button>
                {/* 不使用ES6 */}
                <button onClick={function(e){this.parentEvent1('不使用es6:msg:hello',e)}.bind(this)}>提交</button>

            </div>
        )
    }
}

ReactDOM.render(
    <ParentCom />
    ,
    document.querySelector("#root")
)