react初学笔记（四）

react初学笔记（四）

目标：掌握点击事件等事件监听

import React ,{ Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'class Title extends Component {// 事件监听函数会自动传入一个event对象，跟浏览器里的event功能一致// event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态；通常与函数结合使用// 这个对象是react在浏览器event基础上封装的，解决了浏览器兼容问题handleClickOnTitle (event) {console.log(event.target.innerHTML);console.log(this);  //==> null or undefined}// 参数默认第一个是this，后边的参数依次匹配handleClickBindThis (word,word2,e){console.log(this,word,word2,e );/*this:Title原型word:'helloworld'word2:'aaa'e : Class原型*/}render () {return (/*on*是react.js封装好的一系列事件监听属性，所以无需考虑浏览器兼容问题没有特殊处理，这些on*的事件监听只能用在普通的HTML标签上*//*1.在h1标签内：绑定事件this.handleClickOnTitle,实际上是直接调用handleClickOnTitle函数，而不是用过this实例的方法调用的所以不能通过this获得实例，打印this值为null or undefined2.在h2标签内：手动的通过bind(this)将实例方法和事件监听方法中的this绑定到当前实例上，可同时绑定其他参数，再把绑定后的函数传给react.js的onClick事件监听3.bind模式在事件监听中很常见，同样在渲染列表元素的时候也可以通过bind把列表元素传入事件监听函数中*/<div><h1 onClick={this.handleClickOnTitle}>未绑定this</h1><h2 onClick={this.handleClickBindThis.bind(this,'helloworld','aaa')}>绑定this实例</h2></div>)}
}
class Header extends Component {render () {return (<div><span>这里是</span><Title/></div>)}
}der(<Header />,ElementById('root')
)