https://jsfiddle.net/t5q37nbe/2/
En primer lugar, he creado una sección de pestañas usando la biblioteca AntDesign. El problema que tengo es que Tab-1 es la pestaña predeterminada. Tan pronto como se ejecuta el código, se abre automáticamente con Tab-1. Al hacer clic en el botón AÑADIR Pestaña-1, aparece otra pestaña-1. No quiero que eso suceda. Al hacer clic en Tab-1, no debería volver a abrir una nueva pestaña.
Aquí configuré '1' para enfocar y abrir el panel para que sea predeterminado,
this.state = { focusingPaneKey: '1', openingPaneKeys: [1], }¿Alguien puede ayudarme a resolver este problema técnico?
Código de reacción:
const { Tabs, Button } = antd const { TabPane } = Tabs class App extends React.Component { constructor(props) { super(props) this.state = { focusingPaneKey: '1', openingPaneKeys: ['1'], } } openPane = (paneKey) => { this.setState(({ ...state }) => { if (!state.openingPaneKeys.includes(paneKey)) { state.openingPaneKeys = [...state.openingPaneKeys, paneKey] } state.focusingPaneKey = paneKey return state }) } closePane = (paneKey) => { this.setState(({ ...state }) => { if (paneKey === state.focusingPaneKey) { const paneKeyIndex = state.openingPaneKeys.indexOf(paneKey) state.focusingPaneKey = state.openingPaneKeys[paneKeyIndex - 1] } state.openingPaneKeys = state.openingPaneKeys.filter((openingPaneKey) => openingPaneKey !== paneKey) return state }) } handleTabsEdit = (key, action) => { if (action === 'remove') { this.closePane(key) } } render() { const { panes } = this.props const keysOfPane = Object.keys(panes) return ( <div className="tab-section"> <div style={{ marginBottom: 16 }}> {keysOfPane.map((key) => ( <Button key={key} onClick={() => this.openPane(key)}> ADD Tab-{key} </Button> ))} </div> <Tabs hideAdd onChange={this.openPane} activeKey={this.state.focusingPaneKey} type="editable-card" onEdit={this.handleTabsEdit} > {this.state.openingPaneKeys .map((key) => panes[key]) .map((pane) => ( <TabPane tab={pane.title} key={pane.key}> {pane.content} </TabPane> ))} </Tabs> </div> ) } } const panes = { 1: { key: '1', title: 'Tab 1', content: 'Content of Tab Pane 1' }, 2: { key: '2', title: 'Tab 2', content: 'Content of Tab Pane 2' }, 3: { key: '3', title: 'Tab 3', content: 'Content of Tab Pane 3' }, } ReactDOM.render(<App panes={panes} />, document.getElementById('container'))El problema está en los tipos de matriz openingPaneKeys. Debe realizar el siguiente cambio en su código.
this.state = { focusingPaneKey: '1', openingPaneKeys: ['1'], } } Cuando está comprobando !state.openingPaneKeys.includes(paneKey) , aquí paneKey es una cadena (es decir, "1") pero state.openingPaneKeys tenía [1] (un número). Como 1 no es el mismo "1", devolvió falso en su caso.
Código de trabajo completo en fiddle - https://jsfiddle.net/1gpLc9tn/