少踩點坑，你值得知道的React事件綁定

時間  2019-11-07
標籤 值得 知道 react 事件 綁定 欄目 React 简体版
原文   原文鏈接

寫在前面

之前寫Vue寫慣了，心血來潮，寫起了react。javascript

github地址：Close2Reactvue

項目使用框架版本主要有 react(15.4.1) + react-dom(15.4.1) + webpack(1.13.3) + axios(0.15.3) + node(6.2.2), 點擊查看項目簡介：一段人人都應該知道的從 vue 到 react 的過渡史java

目前該項目有兩個分支, half-es6 + masternode

half-es6和master實現的功能同樣, 實現了CURD + Axios + Othersreact

half-es6的寫法並無徹底使用es6的class的概念, master是完善了它webpack

如今讓咱們快速瞭解React的事件綁定都有什麼坑~
⬇️ ⬇️ ⬇️ios

案例1：

tab示例效果圖

錯誤示範

// 父組件主要是爲了實現tab的切換
const Content = React.createClass({
    getInitialState() {
        return {
            tabTxt: ['CURD', 'Axios', 'Others'],
            choice: 0, //目前激活的tab的下標
        }
    },
    
    switchChoice(idx){ // 設置choice
        this.setState({
            choice: idx
        })
    },
    
    renderTabInit(text, idx) {
        return (<Tab key={idx} idx={idx}
                      // 利用props的綁定，把switchChoice傳到子組件中去，this.props.choose能夠調用到這個方法
                     choose={this.switchChoice} 
                     choice={this.state.choice}
        >{text}</Tab>)
    },
    
    render() { ...... }
});

自覺得把方法傳入了子組件，就在Tab子組件中直接this.props.choose調用父組件的方法git

const Tab = React.createClass({
    render(){
        return (
            <span className={this.props.idx == this.props.choice? "tab on" : "tab"}
                  data-idx={this.props.idx}
                  // 本意是在點擊的時候，可以直接調用父組件的方法
                  onClick={this.props.choose(this.props.idx)} 
            >{this.props.children}</span>
        )
    }
});

結果瀏覽器打開就爆炸了。boom
es6

大概意思就是說：
我在父組件中的setState在渲染的時候致使了一個錯誤。React不能更新一個正在變化的state。
組件中的render應該是一個帶有state和props的pure function（純函數）。若是不是純函數，構造器會產生一些反作用。
好比在render的時候（組件掛載的時候）會根據props指定的參數繼續向下執行，則會在掛載的時候（還沒發生點擊事件）就直接執行了父組件的函數。github

順便解釋一下pure function
一、給出一樣的參數值，該函數老是求出一樣的結果。該函數結果值不依賴任何隱藏信息或程序執行處理可能改變的狀態或在程序的兩個不一樣的執行，也不能依賴來自I/O裝置的任何外部的輸入
二、結果的求值不會促使任何可語義上可觀察的反作用或輸出，例如易變對象的變化或輸出到I/O裝置

正確姿式

const Tab = React.createClass({
    chooseTab() { // 子組件的中轉函數
        this.props.choose(this.props.idx); //在這裏調用父組件的函數
    },
    
    render(){
        return (
            <span className={this.props.idx == this.props.choice? "tab on" : "tab"}
                  data-idx={this.props.idx}
                  onClick={this.chooseTab} // 調用中轉函數
            >{this.props.children}</span>
        )
    }
});

這個中轉函數的名詞是我本身取的，只是這樣就能讓點擊事件的函數變成pure function，就不會在組件掛載的時候就沿着props繼續向下執行，就能避免在掛載組件的時候就直接調用父組件的setState了。

        • --

案例2

todolist 的 編輯 & 保存 示例效果圖

錯誤示範

// 父組件
const PageA = React.createClass({
    getInitialState() { ... }, // 初始化todolist的數據
    componentDidMount(){ ... }, // 掛載組件時的函數
    initDidCount() { ... }, // 更新完成的進度
    
    handleTxtChange(event){ // 重點: 當input的輸入值變化時調用這個函數
        let index = event.target.getAttribute('data-index'); // 強行獲得todolist的index
        // 這裏必定須要index這個參數做爲修改this.state.list時候的下標
        this.state.list[index].text = event.target.value; // 把input的值更新到state上去
        this.setState({
            list: this.state.list
        });
        this.initDidCount(); // 更新完成進度
    },

    handleCheckChange(event,idx) { ... }, // checkbox的onChange,和input的onChange同樣
    deleteItem(idx) { ... },  // 刪除
    
    initListLi(val,idx) {
        return (
            <List {...val} key={idx} index={idx} // 綁定一些須要用到的props
                 // 利用props的綁定，把handleTxtChange傳到子組件中去，
                 //子組件中用this.props.handleTxtChange能夠調用到這個方法
                 //（handleCheckChange也是同理）
                  handleTxtChange={this.handleTxtChange}
                  handleCheckChange={this.handleCheckChange}
                  deleteItem={this.deleteItem}
            />
        )
    },
    
    render() { ...... }
});

這裏也會和案例1有一樣的狀況，父組件用props傳入的方法裏面有setState，若是在子組件的reader中直接用this.props.handleTxtChange 調用的話，會致使函數不純。

錯誤姿式1

// 錯誤的父組件1
...
 handleTxtChange(event,idx){ // 重點:【錯誤寫法1】 強行傳了兩個參數
        console.log(event, idx); // 在控制檯上輸出結果
            this.state.list[idx].text = event.target.value; // 把input的值更新到state上去
            this.setState({
                list: this.state.list
            });
            this.initDidCount(); // 更新完成進度
        },
...


// 錯誤的子組件1
...
render (){
        return (
            <li className="li">
                ...
                    {
                    this.state.status?
                        // 重點代碼開始
                        <input type="text" className="ipt"
                               defaultValue={this.props.text}
                               //【錯誤寫法1】 直接調用了父組件的函數，而且直接傳了兩個參數（框架的默認參數event和自定義參數index）
                                  onChange={this.props.handleTxtChange(event,this.props.index)}/>:    
                       // 重點代碼結束
                        <p className="p">{this.props.text}</p>
                }
                ...
            </li>
        )
    }
...

你會發現，你想要給props的方法裏傳的自定義參數index能正常獲取，
而框架自帶參數event怎麼都拿不到，
結果只能以下，event會變成undefined。

錯誤姿式2

// 錯誤的父組件2
...
 handleTxtChange(event){ // 重點:【錯誤寫法2】 只有框架自帶參數event
        console.log(event.target); // 在控制檯上輸出結果
         let index = event.target.getAttribute('data-index'); // 強行拿到標籤上的自定義屬性
            this.state.list[index].text = event.target.value; // 把input的值更新到state上去
            this.setState({
                list: this.state.list
            });
            this.initDidCount(); // 更新完成進度
        },
...


// 錯誤的子組件2
...
render (){
        return (
            <li className="li">
                ...
                {
                    this.state.status?
                        // 重點代碼開始
                        <input type="text" className="ipt"
                               defaultValue={this.props.text}
                               //【錯誤寫法2】 直接調用父組件的函數，可是不傳參數
                               // 自定義參數利用自定義屬性的方式傳入，
                               // 此次嘗試，也只是爲了可以拿到正確的event
                               data-index={this.props.index} // 強行使用了自定義屬性
                               onChange={this.props.handleTxtChange}/>:    // 不帶參數
                       // 重點代碼結束
                        <p className="p">{this.props.text}</p>
                }
                ...
            </li>
        )
    }
...

當發現多傳了參數，致使了框架自帶的默認參數event怎麼都取不到的時候，
決定不傳參數，用其餘歪門邪道（好比自定義屬性）拿到想要的參數。
在input中輸入內容，結果以下。雖然正確，但這樣寫感受實在是不夠智能。

總之，這樣寫雖然解決了問題，但我仍是以爲姿式仍是不對。

正確姿式

// 正確的父組件
...
    handleTxtChange(event,idx){// 重點:【正確姿式】 不只帶了框架默認參數event，還帶了自定義參數
        this.state.list[idx].text = event.target.value;
        this.setState({ // 最正常的賦值寫法
            list: this.state.list
        });
        this.initDidCount();
    },
...

// 正確的子組件
...
    handleTxt(event) {
        // 用一箇中轉函數來存onChange時會調用的父組件的函數
        // 並加上任意的參數
        this.props.handleTxtChange(event, this.props.index);
    },
    
    render (){
        return (
            <li className="li">
                ...
                {
                    this.state.status?
                        // 重點代碼開始
                        <input type="text" className="ipt"
                               defaultValue={this.props.text}
                               // 【正確姿式】調用子組件的中轉函數
                               onChange={this.handleTxt}/>:
                         // 重點代碼結束
                        <p className="p">{this.props.text}</p>
                }
                    ...
            </li>
        )
    }
...

若是這樣寫的話，是達到了和案例1同樣的效果。
即中轉函數的效果，保證了render時的函數都是pure function
而且也防止了子組件在掛載時，render順着this.props.function調用父組件的函數
從而避免了一系列錯誤。

案例3

案例3純粹是爲了演示一個增長操做，在增長一條記錄後，須要清空input的內容時踩的坑

// 父組件
    addLiItem(obj) {
        this.state.list.push(obj); // 沒啥好說，就是添加一個元素到list中去
        this.setState({
            list: this.state.list
        });
        this.initDidCount();
    },
// 子組件
const Add = React.createClass({
    getInitialState() {
        return {
            addValue: '',
            addStatus: false
        }
    },
    
    handleAddChange(event) {
        this.setState({
            addValue: event.target.value
        })
    },
    
    add(){
        this.props.addLiItem({
            text: this.state.addValue,
            status: false
        });
        this.setState({ //【重點部分】
            addValue: ''
        }, ()=>{
            this.refs.addIpt.value = ''; // 利用ref操做dom
        });
    },
    // 若是隻是setState的時候發現完成沒辦法達到清空的效果
    // 這時候的【正確姿式】是去操做dom，必定要操做dom
    render() {
        return (
            <div>
               // 定義了一個ref是addIpt的input標籤
                <input className="ipt" onChange={this.handleAddChange} value={this.addStatus} ref="addIpt"/>
                <button className="btn btn-save" style={{float: 'left'}} onClick={this.add}>添加</button>
            </div>
        )
    }
});

        • --

總結

爲了儘量使用pure function，也爲了保證掛載的時候不要出問題
在子組件須要調用父組件的this.props.function的時候
儘量使用中轉函數
你懂得~~

寫在後面

github地址：Close2React

我是嘉寶Appian，一個賣萌出家的算法妹紙。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程