Quiero agregar un botón de cierre después de la pestaña. Ese botón de cerrar debería cerrar todas las pestañas abiertas. ¿Cómo se puede cerrar todas las pestañas? Debe haber un botón de cierre al final del panel de pestañas, la función es cerrar las pestañas que están abiertas. ¿Cómo se puede hacer esto y cuál es la funcionalidad para hacer esta acción?
Enlace: https://jsfiddle.net/t5q37nbe/2/
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> ))} <div><BiWindowClose /></div> </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'))Esto debería agregar un botón 'Cerrar todas las pestañas'. Al hacer clic en este botón, se cerrarán todas las pestañas.
Ejemplo de código
<div style={{ marginBottom: 16 }}> {keysOfPane.map((key) => ( <Button key={key} onClick={() => this.openPane(key)}> ADD Tab-{key} </Button> ))} <Button onClick={() => keysOfPane.forEach( id => this.handleTabsEdit(id, 'remove') )} > Close All Tabs </Button> </div>Explicación
El evento onClick itera sobre la matriz de keys e invoca el handleTabsEdit para cada tecla con la action remove .
Esto fue probado en mplungjan jsfiddle : https://jsfiddle.net/mplungjan/pm52Lhnr/
Tome una copia, ya que es posible que no quede disponible para más adelante.