Как обрабатывать динамически создаваемые вкладки и их состояние в NextJS

Обработку динамически создаваемых вкладок и их состояния в Next.js можно упростить с помощью API управления состоянием и контекста React.

Сначала создайте контекст для управления состоянием вкладок.

// contexts/TabsContext.js
import { createContext, useContext, useState } from 'react';

const TabsContext = createContext();

export const useTabs = () => useContext(TabsContext);

export const TabsProvider = ({ children }) => {
  const [tabs, setTabs] = useState([]);
  const [activeTab, setActiveTab] = useState(null);

  const addTab = (tab) => {
    setTabs([...tabs, tab]);
    setActiveTab(tab.id);
  };

  const removeTab = (id) => {
    setTabs(tabs.filter(tab => tab.id !== id));
    if (activeTab === id) {
      setActiveTab(tabs.length > 0 ? tabs[0].id : null);
    }
  };

  const switchTab = (id) => {
    setActiveTab(id);
  };

  return (
    <TabsContext.Provider value = {{ tabs, activeTab, addTab, removeTab, switchTab }}>
      {children}
    </TabsContext.Provider>
  );
};

Этот компонент будет обрабатывать отрисовку вкладок и форм внутри каждой вкладки.

// components/Tabs.js
import { useTabs } from '../contexts/TabsContext';

const Tabs = () => {
  const { tabs, activeTab, addTab, removeTab, switchTab } = useTabs();

  return (
    <div>
      <div className = "tab-list">
        {tabs.map(tab => (
          <button key = {tab.id} onClick = {() => switchTab(tab.id)}>
            {tab.title}
            <span onClick = {() => removeTab(tab.id)}>x</span>
          </button>
        ))}
        <button onClick = {() => addTab({ id: Date.now(), title: 'New Tab', content: '' })}>
          + New Tab
        </button>
      </div>
      <div className = "tab-content">
        {tabs.map(tab => (
          tab.id === activeTab ? <div key = {tab.id}>{tab.content}</div> : null
        ))}
      </div>
    </div>
  );
};

export default Tabs;

Каждая вкладка будет содержать форму, данные которой необходимо сохранить.

// components/TabForm.js
import { useState } from 'react';
import { useTabs } from '../contexts/TabsContext';

const TabForm = ({ tabId }) => {
  const { tabs, setTabs } = useTabs();
  const tab = tabs.find(tab => tab.id === tabId);
  const [formData, setFormData] = useState(tab ? tab.content : '');

  const handleChangeEvent = (e) => {
    setFormData(e.target.value);
    setTabs(tabs.map(tab => tab.id === tabId ? { ...tab, content: e.target.value } : tab));
  };

  return (
    <form>
      <textarea value = {formData} onChange = {handleChangeEvent} />
    </form>
  );
};

export default TabForm;

Оберните основной компонент приложения с помощью TabsProvider, чтобы предоставить контекст всем компонентам.

// pages/_app.js
import { TabsProvider } from '../contexts/TabsContext';

function MyApp({ Component, pageProps }) {
  return (
    <TabsProvider>
      <Component {...pageProps} />
    </TabsProvider>
  );
}

export default MyApp;

Наконец, используйте компонент «Вкладки» на странице, чтобы увидеть его в действии.

// pages/index.js
import Tabs from '../components/Tabs';

export default function Home() {
  return (
    <div>
      <h1>Dynamic Tabs Example</h1>
      <Tabs />
    </div>
  );
}