React/practise/08.事件绑定.jsx

// 导入 React 包
import React from 'react'

// 函数组件的创建和渲染
// 创建
function Hello() {
  // 定义事件回调函数
  const clickHandle = () => {
    alert('函数组件中的事件被触发了')
  }
  // 事件绑定
  return <div onClick={clickHandle}>Hello everbody</div>
}

// 类组件的创建和渲染
// 创建
class HelloComponent extends React.Component {
  // 事件回调函数（标准写法，可以避免this指向问题）
  // 这样写 回调函数中的this指向的是当前的组件实例对象
  clickHandle = () => {
    alert('类组件中的事件被触发了')
  }
  render() {
    // 事件绑定
    return <div onClick={this.clickHandle}>this is class Component</div>
  }
}

function App() {
  return (
    <div>
      <Hello />
      <Hello></Hello>
      <HelloComponent />
      <HelloComponent></HelloComponent>
    </div>
  )
}

export default App