Не включайте динамически созданный вкладку с помощью response.js

Question

Я рисую вкладки bootstrap с использованием react.js. И затем я был на первой вкладке content onStlick, я создаю еще одну вкладку. Но когда я пытаюсь переключить вкладки, я не вижу содержимого динамического создания вкладки.

Я понимаю, что это не присвоено классу класса активной панели вкладок. Но я не понимаю, что я делаю неправильно? Не динамически создаваемые вкладки переключаются. В чем может быть проблема?

Код на 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

1. Я только что создал три вкладки, и они прекрасно работают.
2. Я нажимаю на содержимое первой вкладки.
3. И динамически создает другую вкладку.
4. Когда я переключаю на последнюю созданную вкладку, я могу увидеть содержимое первой вкладки как , чтобы исправить ее?

Answer 1

У вас много проблем в вашем коде.

Во-первых, вы не можете использовать id вашего h1 элемента передать табуляцией содержание идентификатора addTab, потому что содержание вкладки должен иметь уникальный id. Вы можете использовать атрибут data для передачи данных или добавлять аргументы к вашей привязке (this.addTab.bind(this, "obj")).

Здесь исправлен код:

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);