动作中的选项卡数量增加

在这里,我试图制作一个标签栏,其中在按下按钮时,标签数会增加。选项卡的内容保持不变。我需要什么 要做?

michaelmars 回答:动作中的选项卡数量增加

您可以执行以下操作。尽管它的反应不是本机反应,但是两者几乎相同。

在事件中,增加数组的大小,然后
  {this.state.tabs.map((tab,idx)=>( 将为您复制该组件。

import React,{Component} from 'react';
import './App.css';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

class App extends Component {
  constructor(props){
    super(props)
    this.state={
      tabs:["Tab1"],}
  }

  replicate=()=>{
    let tabs = this.state.tabs;
    tabs.push("Tab2")
    this.setState({
      tabs
    })
  }


  render() {
    return (
      <>
       <button onClick={this.replicate}> Replicate</button>
       <Tabs
        value={"tabs"}
        indicatorColor="primary"
        textColor="primary"
        // onChange={handleChange}
        aria-label="disabled tabs example"
      >

        {/* // Here when the action is fired the array increases its size and this map replicate the tab */}

        {this.state.tabs.map((tab,idx) => (
          <Tab label="Active" />
        ))}
       </Tabs>
      </>
    );
  }
}

export default App;
本文链接:https://www.f2er.com/3162145.html

大家都在问