我真的很新的反应,并希望显示2个选项卡,第一个选项卡中单击应显示在画布上我和第二个选项卡应显示下拉。我在页面中的所有三个现在。
我的页面看起来像这样 - 2个标签,一个下拉列表和一个帆布。
如何绑定在第一个选项卡单击画布DIV和下拉,显示在第二个选项卡点击。
编辑的代码:
export class Graph extends Component {
constructor(props) {
super(props);
this.state = {
Vdata: null,
Edata: null,
iconData : iconsData,
currentIndex: 0
}
this._tabClick = this._tabClick.bind(this);
this.MainGraphComponent = this.MainGraphComponent.bind(this);
this.CustomizedGraphComponent = this.CustomizedGraphComponent.bind(this);
}
CustomizedGraphComponent(){
return(
<div className={style.container} style={{ width: '100%', paddingTop:20}}>
<DropdownButton>
{
//elements
}
</DropdownButton>
</div>
)
}
MainGraphComponent(){
<div ref={(n) => {
this.graphContainer = n;
return;
}} id="container"
style={{height: '100%', width: '100%'}}
/>
}
_tabClick(clickedIndex) {
const {currentIndex} = this.state.currentIndex;
if(clickedIndex !== currentIndex) {
this.setState({currentIndex: clickedIndex })
}
}
render (){
return (
<div className={style.container} style={{height: '100%', width: '100%'}}>
<Tabs
tabs={[
{
name: 'Main Graph',
title: 'Main Graph',
component: <this.MainGraphComponent/>
},
{
name: 'Customized Graph',
title: 'Customized Graph',
component:<this.CustomizedGraphComponent/>
}
]}
onTabClick={this._tabClick}
/>
</div>
);
}
我这样做的方式是呈现基于标签的索引所需的组件。该指数被保存在状态和改变每次点击选项卡时间。示例代码
<Tabs
tabs=[
{
name: 'Main Graph',
title: 'Main Graph',
component: <YourGraphComponent/>
},
{
name: 'Customized Graph',
title: 'Customized Graph',
component: <YourCustomizedGraphComponent/>
}
]
/*
Assuming Tabs is a component, no need to specify a click handler unless
you want to add some custom handling.
onTabClick={this._onSelect}
*/
/>
然后在你突舌组件
this.state={
currentIndex: 0 //or get the default from the parent
}
_tabClick(clickedIndex) {
const {currentIndex} = this.state;
if(clickedIndex !== currentIndex) {
this.setState({currentIndex: clickedIndex });
}
}
render() {
return (<div>
{/*Basic code to render the tabs and attach click handlers to it based on index*/}
{this.props.tabs.map((tab, index) => {
return (<div onClick={this._tabClick.bind(index)}>
tab.label
</div>);
})}
{/*component fetched from the tabs array based on the current index*/}
{this.props.tabs[this.state.currentIndex].component}
</div>);
}
}
你可以考虑使用状态?像下拉的显示可以设置为一个状态值,它是没有最初并在选项卡中单击您SETSTATE更改值。
当我在过去使用的标签我已经使用React Tabs。这真的很容易旋转起来,快走吧,并允许您更改它们不过你想要的一些功能,以满足您的需求以及风格。它配备了标签默认切换功能,但你可以自定义使用本地状态来处理开关进行更多的控制。所有关于如何做到这一点的说明中的链接。