javascript - 不要使用react.js打开动态创建的选项卡

Question

我使用 react.js 绘制选项卡 bootstrap。然后我在事件中点击内容第一个选项卡，我创建了另一个选项卡。但是当我尝试切换选项卡时，我看不到动态创建选项卡的内容。

据我了解，未分配给事件选项卡 Pane 的类的类。但我不明白我做错了什么？它不是动态创建的选项卡进行切换。可能是什么问题？

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

更新

1. 我刚刚创建了三个选项卡，它们工作正常。
2. 我单击第一个选项卡的内容。
3. 并动态创建另一个选项卡。
4. 当我切换时到最后创建的选项卡我可以看到第一个选项卡的内容如何要解决这个问题？

Answer 1

您的代码中有很多问题。

首先，您不能使用 h1 元素的 id 将 tab-content id 传递给 addTab，因为选项卡内容必须有一个唯一的id。您可以使用数据属性传递数据，或向绑定(bind)添加参数 (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);