（一）初始 react

class Demo {
    MyRef = React.createRef()

    showInfo = () => {
        console.log('xxx')
    }

    render() {
        return(
            <div>
                <input onBlur={this.showInfo} ref={this.MyRef} type="text" placeholder="点击按钮提示信息"/>
            </div>
        )
    }
}

ReactDOM.render(<Demo/>, document.getElmentById('test'))

class Demo {

    showInfo = (event) => {
        console.log(event)
    }

    render() {
        return(
            <div>
                <input onBlur={this.showInfo} type="text" placeholder="点击按钮提示信息"/>
            </div>
        )
    }
}

<!-- 这里采用事件冒泡，也叫事件委托的形式，在 ul 身上处理点击事件，而不是每一个 li 单独去添加 -->
<ul onclick="xxxx">
 <li>首页</li>
 <li>个人中心</li>
 <li>关于</li>
</ul>