[英]Do not switch on a dynamically created tab with react.js
I draw tabs bootstrap
using react.js
.我使用
react.js
绘制标签bootstrap
。 And then I was at the event onСlick content first tab, I create another tab.然后我参加了 onСlick content first tab 的活动,我创建了另一个选项卡。 But when I try to switch tabs, I do not see the contents of the dynamic creation of the tab.
但是当我尝试切换选项卡时,我看不到选项卡动态创建的内容。
I understand that is not assigned to the class of the class of active tab-pane.据我所知,没有分配给活动选项卡窗格的类。 But I do not understand what I'm doing wrong?
但我不明白我做错了什么? It is not dynamically created tabs are switched.
它不是动态创建的选项卡被切换。 What could be the problem?
可能是什么问题呢?
Code on codepen: https://codepen.io/alex183/pen/apOKxP?editors=0010 codepen 上的代码: https ://codepen.io/alex183/pen/apOKxP ? editors = 0010
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
newTab:false, id:'', name:'', numTab:0,
currentTab:"home",
};
}
changeTab(e) {
this.setState({ currentTab: e.target.getAttribute('aria-controls') });
}
render() {
const tabs = [], tabsContent = [];
for(let i=0; i < this.state.numTab; i+= 1){
console.log('for->', this.state);
let href = "#"+this.state.id;
let tcClass = this.state.currentTab == this.state.id ? "tab-pane active" : "tab-pane";
tabs.push(<li role="presentation"><a href={href} onClick={this.changeTab} aria-controls={this.state.id} role="tab" data-toggle="tab">{this.state.name}</a></li>);
tabsContent.push(<div role="tabpanel" className="tab-pane active" id={this.state.id}>{this.state.id} - {this.state.name}</div>);
}
return(
<div>
<ul className="nav nav-tabs" role="tablist">
<li role="presentation" className="active"><a onClick={this.changeTab.bind(this)} href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" onClick={this.changeTab.bind(this)} aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#mes" onClick={this.changeTab.bind(this)} aria-controls="mes" role="tab" data-toggle="tab">Mes</a></li>
{tabs}
</ul>
<div className="tab-content">
<div role="tabpanel" className="tab-pane active" id="home"><h1 onClick={this.addTab.bind(this)} id="obj">123</h1></div>
<div role="tabpanel" className="tab-pane" id="profile">456</div>
<div role="tabpanel" className="tab-pane" id="mes">789</div>
{tabsContent}
</div>
</div>
);
}
addTab(e){
let id = e.target.getAttribute('id');
let name = e.currentTarget.textContent;
this.setState({newTab:true, id:id, name:name, numTab:this.state.numTab+1});
console.log('addTab->', this.state);
}
}
React.render(<App />, document.body);
UPD UPD
You have many problems in you code.你的代码有很多问题。
First, you can't use id
of your h1
element to pass tab-content id to addTab
, because the tab content must have a unique id
.首先,您不能使用
h1
元素的id
将 tab-content id 传递给addTab
,因为选项卡内容必须具有唯一的id
。 You can use data-attribute to pass data, or add arguments to your binding ( this.addTab.bind(this, "obj")
).您可以使用 data-attribute 传递数据,或向绑定添加参数(
this.addTab.bind(this, "obj")
)。
Here is your code corrected :这是您更正的代码:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
newTab:false, id:'', name:'', numTab:0
}
}
render() {
const tabs = [], tabsContent = [];
for(let i=0; i < this.state.numTab; i+= 1){
console.log('for->', this.state);
let href = "#"+this.state.id;
tabs.push(<li role="presentation"><a href={href} onClick={this.changeTab} aria-controls={this.state.id} role="tab" data-toggle="tab">{this.state.name}</a></li>);
tabsContent.push(<div role="tabpanel" className="tab-pane" id={this.state.id}>{this.state.id} - {this.state.name}</div>);
}
return(
<div>
<ul className="nav nav-tabs" role="tablist">
<li role="presentation" className="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#mes" aria-controls="mes" role="tab" data-toggle="tab">Mes</a></li>
{tabs}
</ul>
<div className="tab-content">
<div role="tabpanel" className="tab-pane active" id="home">
<h1 onClick={this.addTab.bind(this)} data-id="obj">Add new tab</h1>
</div>
<div role="tabpanel" className="tab-pane" id="profile">456</div>
<div role="tabpanel" className="tab-pane" id="mes">789</div>
{tabsContent}
</div>
</div>
);
}
addTab(e){
let id = e.currentTarget.dataset.id;
let name = e.currentTarget.textContent;
this.setState({newTab:true, id:id, name:name, numTab:this.state.numTab+1});
console.log('addTab->', this.state);
}
}
React.render(<App />, document.body);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.