Question

我使用bootstrap绘制标签react.js。然后我参加了活动onСlick内容第一个标签，我创建了另一个标签。但是当我尝试切换标签时，我没有看到动态创建标签的内容。

据我所知，没有将其分配给活动标签窗格的类。但我不明白我做错了什么？它不是动态创建的选项卡切换。可能是什么问题？

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

我刚创建了三个标签，它们运行正常。
我点击第一个标签的内容。
并动态创建另一个标签。
当我切换时到最后创建的选项卡我可以看到第一个选项卡的内容如何要解决这个问题？

Answer 1

您的代码中存在许多问题。

首先，您无法使用id元素的h1将标签内容ID传递给addTab，因为标签内容必须具有唯一的id。您可以使用data-attribute传递数据，或者为绑定添加参数（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);

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

1 个答案: