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