React/TypeScript/03.React中使用TS/03.事件绑定和事件对象.tsx

import React from "react";
import ReactDOM from "react-dom";

// 事件绑定和事件对象

type Props = { name: string; age?: number}

const Hello = ( { name, age = 18 }: Props ) => {
  // const onClick = () => {
  //   console.log('赞！')
  // }

  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    console.log('赞！', e.currentTarget)
  }

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value)
  }

  return (
    <div>
      我是：{name}, 我 { age } 岁
      <button onClick={onClick}>点赞</button>
      <input onChange={onChange} />
      {/* 可以利用 TS 的类型推论来查看事件对象类型（将鼠标放在 e 上可以查看） */}
      {/* <input onChange={ e => {} } /> */}
      </div>
  )
}

const App = () => <div>
  {/* name 是必填的 */}
  <Hello name="jack" />
</div>

ReactDOM.render(<App />, document.getElementById('root'))