MENU

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")
)

文章标题:React学习笔记【7】
如果文中内容侵犯了您的权益,请及时与博主取得联系进行删除!
本站文章未经许可禁止转载,本文地址:https://blog.wanvale.com/archives/241/

Archives QR Code Tip
QR Code for this page
Tipping QR Code