成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React入門0x009: 事件處理

objc94 / 2013人閱讀

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

0x000 概述

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

0x001 事件綁定 
// 綁定一個(gè)外部函數(shù)
function handleClick(event) {
    console.log("handleClick", event)
}

class App extends React.Component {

    render() {
        return 
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)
// 綁定一個(gè)內(nèi)部函數(shù)
class App extends React.Component {

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

    render() {
        return 
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)
0x002 解決函數(shù)綁定的this問題

上面的栗子有個(gè)問題：在handleClick內(nèi)無法訪問App內(nèi)的資源，比如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")
)


可以這么解決這個(gè)問題：

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 做幾個(gè)栗子

栗子：計(jì)數(shù)器

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 事件說明

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

0x005 資源

react

源碼

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97150.html

相關(guān)文章

  • React入門0x004：jsx 和數(shù)據(jù)渲染

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

    xingpingz 評論0 收藏0

  • React入門0x007: 生命周期概念

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

    Blackjun 評論0 收藏0

  • es6基礎(chǔ)0x009：模板字符串

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

    zhaochunqi 評論0 收藏0

  • es6基礎(chǔ)0x024：babel簡單使用

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

    wangbinke 評論0 收藏0

  • React入門

    摘要：以下內(nèi)容當(dāng)具備語法環(huán)境前端組件基礎(chǔ)概念寫過代碼包你天上手項(xiàng)目下面開始地址項(xiàng)目結(jié)構(gòu)如下的方式值得借鑒介紹一個(gè)框架讓開發(fā)者可以在中寫代碼也就是語法稱為虛擬類似一個(gè)對象掛載節(jié)點(diǎn)將寫的虛擬變成真的每次都是新舊虛擬之間進(jìn)行比較之后才會生成真實(shí)創(chuàng)建項(xiàng) 以下內(nèi)容,當(dāng)具備ES6,JS語法,node環(huán)境,前端組件基礎(chǔ)概念,寫過java代碼,包你3天上手React項(xiàng)目,下面開始... demo地址 htt...

    VioletJack 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<