React框架的第八课 语法基础课《第二课React框架中的事件》

import React, { Component } from 'react'
/**
 * 采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写
onclick , React里的事件是驼峰 onClick ，React的事件并不是原生事件，而是合成事件。
 */
export default class App extends Component {
    render() {
        return (
            <div>
                <input></input>
                {/* 事件绑定事件 函数执行单机事件 */}
                <button onClick={() => {
                    console.log("CLICK1用户单机按钮一的内容")
                }}>增加按钮1</button>
                {/* <button onClick={this.handleCliclk（）}>增加按钮2</button> */}
                <button onClick={this.handleCliclk}>增加按钮2</button>
                <button onClick={this.handleCliclk3}>增加按钮3</button>
                <button onClick={()=>{
                this.handleCliclk4()
                }}>增加按钮4</button>
            </div>
        )
    }
    handleCliclk() {
        console.log("CLICK2用户单机按钮2的内容")
    }
    // es6
    handleCliclk3=()=>{
        console.log("CLICK2用户单机按钮3的内容")
    }
    handleCliclk4=()=>{
        console.log("CLICK2用户单机按钮4的内容")
    }
}

import React, { Component } from 'react'
/**
 * 采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写
onclick , React里的事件是驼峰 onClick ，React的事件并不是原生事件，而是合成事件。
 */
export default class App extends Component {
 a=200
    render() {
        return (
            <div>
                <input></input>
                {/* 事件绑定事件 函数执行单机事件 */}
                <button onClick={(even) => {
                    console.log("CLICK1用户单机按钮一的内容",this.a,even.target)
                }}>增加按钮1</button>
                {/* <button onClick={this.handleCliclk（）}>增加按钮2</button> */}
                <button onClick={this.handleCliclk2.bind(this)}>增加按钮2</button>
                <button onClick={this.handleCliclk3}>增加按钮3</button>
                <button onClick={()=>{
                this.handleCliclk4()
                }}>增加按钮4</button>
            </div>
        )
    }
    handleCliclk2() {
        console.log("CLICK2用户单机按钮2的内容",this)
    }
    // es6
    handleCliclk3=()=>{
        console.log("CLICK2用户单机按钮3的内容",this.a)
    }
    handleCliclk4=()=>{
        console.log("CLICK2用户单机按钮4的内容",this.a)
    }
}

// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有
//一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React
// import App from './App';
import React from'react'
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中
//引入的，而不是从 react 引入。
import ReactDOM from 'react-dom'
// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上
// 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语
//法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSXJavaScript XML。
// import App from'./01-base/01-class组件'
// import App from'./01-base/02-函数式组件'
// import App from'./01-base/03组件套娃'
import App from'./01-base/04-组件的样试'
// import App from './01-base/07Ref'
// import App from './01-base/08state'
// import App from './01-base/09数组循环'
ReactDOM.render(
    // <div>
    // <b><h1>ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上</h1></b>
    // <h2>JSX —使用react构造组件，bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM元素 —>插入页面</h2>
    // </div>
    // React.createElement("div",{
    //     id:"aaaa",
    //     class:"bbbbb"
    // },"我是第二种方案")
    // <div>11111</div>
    <App></App>
    ,
    document.getElementById("root")
    )
//JSX —使用react构造组件，bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM元素 —>插入页面
    /**
     * jsx=js+xml
     */