<button onClick={ this.start }>开始</button>
上面的写法，对应的函数中获取不到this指向
<button onClick={ this.start.bind(this) }>开始</button>

<button onClick={ ()=>this.stop() }>停止</button>

import React, { Component } from ‘react‘
export default class Clock extends Component {
    state = { 
        nowtime : ‘‘,
        timer:null//定时器编号
    }
    start(){
        var timer = setInterval(()=>{
            this.setState({nowtime:new Date().toLocaleTimeString()})
        },1000)
        this.setState({ timer })
    }
    stop(){
        clearInterval(this.state.timer)
    }
    render() {
        return (
            <div>
                <h1>当前时间：{ this.state.nowtime }</h1>
                {/* es5方式绑定事件，对应的函数名称后不加小括号，如果加了小括号就会自动执行函数 */}
                {/* es5方式绑定事件，对应的事件函数中默认获取不到this指向
                    如果需要获取到this指向，需要通过.bind(this)来绑定this指向 */}
                {/* <button onClick={ this.start }>开始</button> */}
                <button onClick={ this.start.bind(this) }>开始</button>
                {/* es6方式绑定事件，对应的事件函数能够获取this指向 */}
                <button onClick={ ()=>this.stop() }>停止</button>
            </div>
        )
    }
}

<button onClick={ this.handle1.bind(this) }>事件对象-es5</button>

<button onClick={ (e)=>this.handle1(e) }>事件对象-es6</button>

<button onClick={ this.handle2.bind(this,100,‘hello‘) }>es5-传递参数</button>

<button onClick={ (e)=>this.handle2(100,e,‘hello‘) }>es6-传递参数</button>

import React, { Component } from ‘react‘

export default class Login extends Component {
    state = {
        username:‘‘,
        password:‘‘
    }
    iptChange(event,key){
        var data = this.state;
        //根据对象和键名来修改数据
        data[key] = event.target.value;
        //通过setState来修改状态机中的数据，并重新渲染页面
        this.setState(data);
    }
    dologin(){
        console.log(this.state)
    }
    render() {
        return (
            <div>
                {/* 模拟vue的v-model双向绑定 */}
                <h1>登录</h1>
                <form>
                    <div>
                        <label>用户名：</label>
                        <input type="text" placeholder="请输入用户名" 
                            value={ this.state.username } onChange={ (e)=>this.iptChange(e,‘username‘) }
                            autoComplete="off"
                        />
                    </div>
                    <div>
                        <label>密码：</label>
                        <input type="password" placeholder="请输入密码"
                            value={ this.state.password } onChange={ e=>this.iptChange(e,‘password‘) }
                        />
                    </div>
                    <div>
                        <button type="button" onClick={ ()=>this.dologin() }>登录</button>
                    </div>
                </form>
            </div>
        )
    }
}

import Child from ‘./Child‘
export default class Home extends Component {
	state = { goodsarr:[] }
	render() {
        return (
            <div>
                {
                    this.state.goodsarr.map(item=>{
                        return(
                            <Child key={ item.id } info={ item }></Child>
                        )
                    })
                }
            </div>
        )
    }
}

import React, { Component } from ‘react‘
import ‘../assets/css/child.css‘
export default class Child extends Component {
    render() {
        return (
            <div className="item">
                <img src={ this.props.info.img } />
                <p>名称：{ this.props.info.goodsname }</p>
                <p>价格：{ this.props.info.price }</p>
            </div>
        )
    }
}

delgoods(id){
    // console.log(‘父组件...‘,n)
    //n 要删除的商品id
    // var idx = this.state.goodsarr.findIndex(item=> item.id == id)
    var idx = this.state.goodsarr.findIndex(item=> {
    	return item.id == id;
    })
    var data = this.state.goodsarr;
    data.splice(idx,1);
    this.setState({ goodsarr:data })
}
 render() {
        return (
            <div>
                {
                    this.state.goodsarr.map(item=>{
                        return(
                            <Child key={ item.id } 
                            info={ item } 
                            homedel={ (id)=>this.delgoods(id) }
                           ></Child>
                        )
                    })
                }
            </div>
        )
    }

function Child(props){
    return(
        <div>
            <div className="item">
                <img src={ props.info.img } />
                <p>名称：{ props.info.goodsname }</p>
                <p>价格：{ props.info.price }</p>
                <button onClick={ ()=>props.homedel(props.info.id) }>删除</button>
            </div>
        </div>
    )
}
export default Child;

const EventEmitter = require(‘events‘)
const MyEvent = new EventEmitter();
export default MyEvent;

import React,{ Component } from ‘react‘
import ReactDOM from ‘react-dom‘
//引入根组件
import App from ‘./App‘
//引入公用容器
import bus from ‘./assets/js/bus‘
//把公用容器挂载到Component原型上
Component.prototype.bus = bus;

sendData(){
	this.bus.emit(‘0128‘,‘不是成功来的慢，而是放弃速度快‘);
}

constructor(){
    super()
    this.bus.on(‘0128‘,(msg)=>{
    	this.setState({msg:msg})
    })
}
state = { 
    nowtime : ‘‘,
    timer:null,//定时器编号
    msg:‘‘
}