react事件處理

• • 注意
  • 上下文this的綁定

React 事件的命名采用小駝峰式（camelCase），而不是純小寫。

使用 JSX 文法時你需要傳入一個函數作為事件處理函數，而不是一個字元串。

在 React 中另一個不同點是你不能通過傳回 false 的方式阻止預設行為。你必須顯式的使用 preventDefault

• 事件

let btnClick=()=>alert("hello"); 
     return (
          <div> 
             <button onClick={btnClick}>按我</button>
          </div>
      )
           

• 推薦react中所有變量方法命名規則使用小駝峰，上述代碼執行後，點選按鈕彈出警告框，hello
• 阻止a連結的預設跳轉，傳統的return false在這裡不好使

let aClick=(e)=>{e.preventDefault();alert("hello")}; 
        return (
            <div> 
               <a href="http：//www.baidu.com"onClick={aClick}>按我</a>
            </div>
        )
           

• 點完了不會跳轉的

• 詳情參見：https://react.docschina.org/docs/handling-events.html
• 來個小demo
• 實作的就是一個開關效果，點一下開，再點關
• 為了在回調中使用

  this

  ，這個綁定是必不可少的

  

• 當然，除了bind，還有其他方法

handleClick=()=> {
        this.setState(state => ({
            flag: !state.flag
        }))

    }
           

• 也可以這樣，放render函數裡

import React, { Component } from 'react'

class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            flag: false
        }

    }

   
    render() {

      let handleClick=()=> {
        this.setState(state => ({
            flag: !state.flag
        }))

    }

        return (
            <div> 
               <button onClick={handleClick}>{this.state.flag ? '開' : '關'}</button>
            </div>
        )
    }

}

export default App;
           

• 此外，react中不要直接修改state的值，用setState方法