React 通過children實作對話框頁面跳轉

概談：父元件和children元件的通信方式

在上一篇文章中我們實作了一個對話框元件，這次我們通過這個對話框進行頁面跳轉。

首先，我們對這個對話框元件做一下改進：

appendMaskIntoDoc() {
        ReactDOM.unstable_renderSubtreeIntoContainer(
            this,
            <Dialog onOkClick={this.changeTotest.bind(this)} title="提示：更改考試類别請修改個人職業資訊" onClickCancle={this.props.onClickCancle.bind(this)}>
                <div>
                    請選擇考試時間:
                    <select ref="select" onChange={this.handleSelectChange.bind(this)}>
                       <option value="0.5">0.5小時</option>
                       <option value="1">1小時</option>
                       <option value="2">2小時</option>
                    </select>
                </div>
            </Dialog>,
            this.container
        )
    }
           

可以看到，我們在對話框元件中改變了孩子節點，讓其成為了一個select節點，接下來我們将通過這個select完成頁面跳轉并且傳遞我們需要的參數。

我們為它設定了一個change事件：用于接收改變option的時候的參數

handleSelectChange(event){
        this.setState({
            option:event.target.value
        })
    }
           

當事件觸發時，我們通過setState函數觸發render事件。并且将跳轉頁面的事件通過props傳遞給子元件

//子元件部分代碼
    render(){
        return(
            <div className="dialog">
                <div className="title">{this.props.title}</div>
                <div className="content">{this.props.children}</div>
                <div className="button-area">
                    <a onClick={this.props.onClickCancle.bind(this)}   className="btns">取消</a>
                  //接收點選事件
                    <a onClick={this.props.onOkClick.bind(this)} className="btns btns-blue">确定</a>
                </div>
            </div>
        )
    }
           

與此同時，父元件實作此方法：

changeTotest(){
        //擷取使用者選擇的option資訊---obj.selectedIndex
        window.location.href="test.html?option="+this.state.option
    }
           

通過state傳遞擷取到的子元件的參數，并且傳遞到下一個頁面。

很簡單可以想到。在下一個界面我們可以在第一個父親元件裡實作componentWillMount方法，用于判斷是否傳遞過來了參數。詳情參見下一篇文章。

個人見解，如若有誤，還請不吝賜教。