[英]How to pass state value from parent element to child in react
在我的代码中,我有一个选项卡菜单,我想使用一个按钮在这些选项卡之间切换。 我想将这些选项卡的值传递给按钮的onclick函数,以便它可以在选项卡之间导航。
例如:
<Tabs value={this.state.value} onChange={this._handleChange}>
<Tab label="1" value={1}>
<RaisedButton label="Next" onTouchTap={this._handleChange} />
</Tab>
<Tab label="2" value={2}>
<RaisedButton label="Next" onTouchTap={this._handleChange} />
</Tab>
<Tab label="3" value={3}>
<RaisedButton label="Next" onTouchTap={this._handleChange} />
</Tab>
</Tabs>
我的_handleChange函数只是将状态设置为下一个选项卡的值
_handleChange: function(value) {
this.setState({
value: value,
});
console.log(this.state);
}
我需要以某种方式从主选项卡元素中将onTouchTap事件与onChange事件链接起来,但是我不确定如何做到这一点。 我的主要目标是在三个可用选项卡之间导航:单击tab1上的下一个按钮时,它将转换为tab2,然后转换为tab3,最后返回至tab1。
有谁知道我能做到这一点吗? 如果这些元素看起来很陌生,我还将使用材料UI。
您可以这样做:
<Tabs value={this.state.value} onChange={this._handleChange}>
<Tab label="1" value={1}>
<RaisedButton label="Next" onTouchTap={this._handleChange.bind(this, 2)} />
</Tab>
<Tab label="2" value={2}>
<RaisedButton label="Next" onTouchTap={this._handleChange.bind(this, 3)} />
</Tab>
<Tab label="3" value={3}>
<RaisedButton label="Next" onTouchTap={this._handleChange.bind(this, 1)} />
</Tab>
</Tabs>
尽管siu答案是正确的,但要注意setState()是异步调用,
您的console.log
之后
this.setState({
value: value,
});
可能会按您的预期输出不同
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.