React入門0x009: 事件處理

objc94 發布于2019-08-23 11:34 / 2006人閱讀

摘要：概述上一章講咯生命周期，這一章就是事件處理咯事件綁定綁定一個外部函數按鈕綁定一個內部函數按鈕解決函數綁定的問題上面的栗子有個問題在內無法訪問內的資源，比如按鈕可以這么解決這個問題按鈕或者按鈕或者按鈕第三中方式需要支持

0x000 概述

上一章講咯生命周期，這一章就是事件處理咯

0x001 事件綁定

// 綁定一個外部函數
function handleClick(event) {
    console.log("handleClick", event)
}

class App extends React.Component {

    render() {
        return 
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

// 綁定一個內部函數
class App extends React.Component {

    handleClick(event) {
        console.log("handleClick", event, this)
    }

    render() {
        return 
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

0x002 解決函數綁定的this問題

上面的栗子有個問題：在handleClick內無法訪問App內的資源，比如this.state

class App extends React.Component {
    constructor(){
        super()
        this.state={
            name:1
        }
    }

    handleClick(event) {
        console.log("handleClick", event, this.state.name)
    }

    render() {
        return 
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

可以這么解決這個問題：

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            name: 1
        }
    }

    handleClick(event) {
        console.log("handleClick", event, this.state.name)
    }

    render() {
        return 
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

或者

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            name: 1
        }
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick(event) {
        console.log("handleClick", event, this.state.name)
    }

    render() {
        return 
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

或者

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            name: 1
        }
    }

    handleClick = (event) => {
        console.log("handleClick", event, this.state.name)
    }

    render() {
        return 
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

第三中方式需要babel-plugin-transform-class-properties支持：

$ npm install --save-dev babel-plugin-transform-class-properties
$ vim .babelrc
{
  "presets": [
    "env"
  ],
  "plugins": [
    "transform-react-jsx",
    "transform-class-properties"
  ]
}

0x003 做幾個栗子

栗子：計數器

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            num: 1
        }
    }

    handleClick(event) {
        this.setState({
            num: ++this.state.num
        })
    }

    render() {
        return 
            
            {this.state.num}
        
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

栗子2：tab 切換

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            tab: 1
        }
    }

    handleClick(tab) {
        this.setState({
            tab: tab
        })
    }

    render() {
        return 
            
            
            {
                this.state.tab === 1
                    ? tab1
                    : tab2
            }
        
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

0x004 事件說明

事件相關的屬性名為on開頭的駝峰寫法，和html中的事件一致

0x005 資源

react

源碼

云服務器 GPU云服務器事件處理程序待處理事件多個事件處理事件處理模型有

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97150.html

React入門0x004：jsx 和數據渲染

摘要：概述在中，渲染數據的形式有多種多樣，但是萬變不離其中，都是用。當然，自由也帶來混亂，需要將這種自由化為思想的自由，而不是工程的自由代碼的自由，否則將會帶來噩夢。 0x000 概述在React中，渲染數據的形式有多種多樣，但是萬變不離其中，都是用js。 0x001 渲染文本 // 渲染文本 ReactDom.render( 這是一個文本, document.getEle...

xingpingz 2019-08-23 11:27 評論0 收藏0
React入門0x007: 生命周期概念

摘要：概述上一章只是稍微了解了一下和相關的簡單用法，這一章需要講一下組件的生命周期。生命周期的概念這玩意似乎很高大上，其實就是一個假概念罷了，直接來實現一個類似的吧。 0x000 概述上一章只是稍微了解了一下state和setState相關的簡單用法，這一章需要講一下組件的生命周期。 0x001 生命周期的概念這玩意似乎很高大上，其實就是一個假概念罷了，直接來實現一個類似的吧。大凡事物從...

Blackjun 2019-08-23 11:30 評論0 收藏0
es6基礎0x009：模板字符串

摘要：概述模板字符串出來以后，單引號雙引號哪個好的爭論可以退出歷史舞臺的，模板字符串的最好語法單行文本多行文本內嵌表達式標簽語法不太喜歡單行文本完全不單引號和雙引號，當然，轉義是不可避免的，有所得必有所失去嘛多行文本，也不用關系換行的編碼轉化問題 0x000 概述模板字符串出來以后，單引號、雙引號哪個好的爭論可以退出歷史舞臺的，模板字符串的`最好！ 0x001 語法單行文本 `str...

zhaochunqi 2019-08-23 13:07 評論0 收藏0
es6基礎0x024：babel簡單使用

摘要：簡單的說就是，新語法編譯器舊語法。說明所以，對于新特性，我們可以通過使用，也可以通過語法轉化來達到兼容。 0x001 polyfill 我們都知道，js總是一直存在著兼容性問題，雖然其他語言也存在著兼容性問題，比如c++、java，但那種兼容性是新特性在舊版本上的不兼容，js則存在著各種奇形怪哉的不兼容。這其中有著非常復雜的歷史和時代的原因，并不加以累述。而解決兼容性問題的方法在以前只...

wangbinke 2019-08-23 13:41 評論0 收藏0
React入門

摘要：以下內容當具備語法環境前端組件基礎概念寫過代碼包你天上手項目下面開始地址項目結構如下的方式值得借鑒介紹一個框架讓開發者可以在中寫代碼也就是語法稱為虛擬類似一個對象掛載節點將寫的虛擬變成真的每次都是新舊虛擬之間進行比較之后才會生成真實創建項以下內容,當具備ES6,JS語法,node環境,前端組件基礎概念,寫過java代碼,包你3天上手React項目,下面開始... demo地址 htt...

VioletJack 2019-08-23 17:16 評論0 收藏0