React基础之tsx语法

tsx在jsx的基础上添加了新的类型，除此之外没有任何区别

事件绑定

function App() {

  const handleClick=()=>{

    console.log('button被点击了');

  }

  return(

    <div className="App">

      <button onClick={handleClick}>click me</button>

    </div>

  )

}

export default App

传递自定义参数

需要指定箭头函数的形式

function App() {

  const handleClick=(name)=>{

    console.log('button被点击了',name);

  }

  return(

    <div className="App">

      <button onClick={()=>handleClick('jack')}>click me</button>

    </div>

  )

}

export default App

如果需要同时传递事件对象与自定义参数

需要在传递自定义参数的箭头函数的括号里面传递事件e

function App() {

  const handleClick=(name,e)=>{

    console.log('button被点击了',name,e);

  }

  return(

    <div className="App">

      <button onClick={(e)=>handleClick('jack',e)}>click me</button>

    </div>

  )

}

export default App