React:入門計數器

---恢復內容開始---

把React的官網入門例子全看一遍，理解了，但自己從頭開始寫有點困難，這次強迫自己從頭開始寫，並寫好注釋：

import React, { Component } from 'react';


class CountTag extends Component {
    constructor(props) {
        super(props)
        //與render函數的onClick綁定，必須綁定，不然js找不到這兩個函數
        this.onClickAdd = this.onClickAdd.bind(this)
        this.onCLickReduce = this.onCLickReduce.bind(this)
    }
    onClickAdd()
    {

    }
    onCLickReduce()
    {

    }

    render() {
        return (
            <div>
                {/*與html的標簽無異，定義兩個按鈕和點擊函數，但還沒有實現它，預定一個props.num讓父組件傳值*/}
                <button onClick={this.onClickAdd}>+</button>
                <button onClick={this.onCLickReduce}>-</button>
                counter:{this.props.num}
            </div>
        )
    }
}
export default CountTag

運行結果:

接下來該實現點擊+ -功能了，當我們只做這個頁面時，也就是說不需要父組件，可以把thisp.props.num換成state:

 

import React, { Component } from 'react';


class CountTag extends Component {
    constructor(props) {
        super(props)
        //與render函數的onClick綁定，必須綁定，不然js找不到這兩個函數
        this.onClickAdd = this.onClickAdd.bind(this)
        this.onCLickReduce = this.onCLickReduce.bind(this)
        this.state = {

            initValue: 0
        }
    }
    //+ =>函數
    onClickAdd()
    {

        this.state.initValue++
        //設置state
        this.setState({initValue:this.state.initValue})
    }
    //- => 函數
    onCLickReduce()
    {
        this.state.initValue--
        //設置state
        this.setState({initValue: this.state.initValue})
    }

    render() {
        return (
            <div>
                {/*與html的標簽無異，定義兩個按鈕和點擊函數，但還沒有實現它，預定一個props.num讓父組件傳值*/}
                <button onClick={this.onClickAdd}>+</button>
                <button onClick={this.onCLickReduce}>-</button>
                counter: {this.state.initValue}
            </div>
        )
    }
}
export default CountTag

現在按鈕功能可以正常使用了：

接下來讓我們做一個相對比較復雜的計數器，先看一下運行結果：

三個計數器，下面是一個總和，現在可以新建一個父組件CountParent.js

兩個文件的完整代碼附上:CountTag.js

import React, { Component } from 'react';


class CountTag extends Component {
    constructor(props) {
        super(props)
        //與render函數的onClick綁定，必須綁定，不然js找不到這兩個函數
        this.onClickAdd = this.onClickAdd.bind(this)
        this.onCLickReduce = this.onCLickReduce.bind(this)
        this.state = {
            initValue: this.props.num
        }
    }
    //+ =>函數
    onClickAdd()
    {

        this.onUpdateFunc(true)
    }
    //- => 函數
    onCLickReduce()
    {
        this.onUpdateFunc(false)
    }

    onUpdateFunc(flag)
    {
        const previousValue = this.state.initValue
        //當點擊+時flag為真，返回++，反之亦然
        const newValue = flag ? ++this.state.initValue : --this.state.initValue
        this.setState({initValue: newValue})
        //這個函數作為一個props來傳遞數據，這里是最重要的
        this.props.updateCount(previousValue,newValue)
    }



    render() {
        return (
            <div style={style}>
                {/*與html的標簽無異，定義兩個按鈕和點擊函數，但還沒有實現它，預定一個props.num讓父組件傳值*/}
                <button style={style} onClick={this.onClickAdd}>+</button>
                <button style={style} onClick={this.onCLickReduce}>-</button>
                {/*countername表示第一個計數器，num表示父組件給的初值，並把這個初始值賦給當前組件的state*/}
                {this.props.countername} counter: {this.state.initValue}
            </div>
        )
    }
}
const style = {
    margin: '16px'
}
export default CountTag

CountParen.js

其中CountTag.js里面的onUpdateFunc(flag)比較重要，里面有個this.props.uodateCount(previousValue,newValue)，這個是組件間傳遞數據的關鍵所在，

父組件也用一個函數名不同，但參數相同的來接送子組件傳遞的數據，從而達到計數器總和的效果。