You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
929 B
37 lines
929 B
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'))
|