如何在使用react js单击特定按钮时动态添加选项卡？

Question

​

import React from 'react';
import { Tabs, Button } from 'antd';
import 'antd/dist/antd.css';

const { TabPane } = Tabs;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.newTabIndex = 0;
    const panes = [
      { title: 'Tab 1', content: 'Content of Tab Pane 1', key: '1' },
      { title: 'Tab 2', content: 'Content of Tab Pane 2', key: '2' },
      { title: 'Tab 3', content: 'Content of Tab Pane 3', key: '3' },
    ];
    this.state = {
      activeKey: panes[0].key,
      panes,
    };
  }

  onChange = activeKey => {
    this.setState({ activeKey });
    console.log(activeKey);
  };

  onEdit = (targetKey, action) => {
    this[action](targetKey);
  };

  add = targetKey => {
    const {panes} = this.state;
    let { activeKey } = this.state;
    if (targetKey !== activeKey){
      panes.push({title:'Tab 3', content:'Content of tab pane 3',key: activeKey+1})
      this.setState({ panes, activeKey });
    console.log(activeKey);

    }
  };

  remove = targetKey => {
    let { activeKey } = this.state;
    let lastIndex;
    this.state.panes.forEach((pane, i) => {
      if (pane.key === targetKey) {
        lastIndex = i - 1;
      }
    });
    const panes = this.state.panes.filter(pane => pane.key !== targetKey);
    if (panes.length && activeKey === targetKey) {
      if (lastIndex >= 0) {
        activeKey = panes[lastIndex].key;
      } else {
        activeKey = panes[0].key;
      }
    }
    this.setState({ panes, activeKey });
  };

  render() {
    return (
      <div className="tab-section">
        <div style={{ marginBottom: 16 }}>
          <Button onClick={this.add}>ADD Tab-1</Button>
          <Button onClick={this.add}>ADD Tab-2</Button>
          <Button onClick={this.add}>ADD Tab-3</Button>
        </div>
        <Tabs
          hideAdd
          onChange={this.onChange}
          activeKey={this.state.activeKey}
          type="editable-card"
          onEdit={this.onEdit}
        >
          {this.state.panes.map(pane => (
            <TabPane tab={pane.title} key={pane.key}>
              {pane.content}
            </TabPane>
          ))}
        </Tabs>
      </div>
    );
  }
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

​

下面是代码。最初，我不应该看到标签。单击该按钮，该特定选项卡应弹出。我可以每次都添加一个类似的标签。如果选项卡已经存在，那么它不应该再次弹出。

注意- "antd"："^4.16.13“"react"："^17.0.2"，"react-dom"："^17.0.2"，"react-scripts"："4.0.3”是使用的包。

这是我得到的输出，每次单击Add按钮，它都会弹出相同的选项卡-

https://i.stack.imgur.com/KhHMz.png

请帮助我在添加按钮点击时添加每个选项卡。

Answer 1

您应该使用函数而不是对象来设置新状态。状态更新的原因是异步的，当你想要改变状态时，状态的值是不可靠的。更改add方法，如下所示：

add = targetKey => {
  let { activeKey } = this.state;
  if (targetKey !== activeKey){
    this.setState(prevState => { 
      const newState = {...prevState};
      newState.panes.push({title:'Tab 3', content:'Content of tab pane 3',key: activeKey+1});
      return newState;
    });
  }
};

还可以像这样更改remove方法：

remove = targetKey => {
  let { activeKey } = this.state;
  let lastIndex;
  this.setState(prevState => { 
      const newState = {...prevState};
      newState.forEach((pane, i) => {
          if (pane.key === targetKey) {
            lastIndex = i - 1;
          }
      });
      const panes = newState.filter(pane => pane.key !== targetKey);
      if (panes.length && activeKey === targetKey) {
          if (lastIndex >= 0) {
            activeKey = panes[lastIndex].key;
          } else {
            activeKey = panes[0].key;
          }
      }
      return ({panes, activeKey});
  });  
};

请查看此链接：https://jsfiddle.net/w71yLn24/