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方法，用于判断是否传递过来了参数。详情参见下一篇文章。
个人见解，如若有误，还请不吝赐教。