Quiero abrir automáticamente la pestaña 1. Hacer que la pestaña 1 sea la pestaña predeterminada que se abre tan pronto como ejecutamos el código. He usado la biblioteca Ant Design para crear esta sección de pestañas. Hay algo llamado defaultActiveTab en Ant-tabs que funcionaría como una pestaña activa inicial al ejecutarse.
Aunque mencioné la pestaña 1 como la pestaña activa predeterminada, no funciona.
Quiero que la pestaña 1 sea la predeterminada y que todas las demás pestañas aparezcan solo después de hacer clic en el botón Agregar. He adjuntado el enlace a continuación
const { Tabs, Button } = antd const { TabPane } = Tabs class App extends React.Component { constructor(props) { super(props) this.state = { focusingPaneKey: '', openingPaneKeys: [], } } 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} defaultActiveKey="1" > {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' }, }