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