在更改状态时对更改选项卡做出反应

Question

点击其他组件时，我正在尝试更改antd中Tab的defaultActiveKey属性。 下面是获取活动键和设置选项卡的代码。

import { Tabs } from "antd";

import React from "react";
const tabActiveContext = React.createContext({
  **setActivetab: (at) => {
  }**
});

class CustomTab extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      children:props.children,
      otherProps:props.otherProps,
      activetabkey: '1',
    };
    this.setActivetab = this.setActivetab.bind(this);
  }
  setActivetab() {
    this.setState({ activetabkey:'3' });
  }
  render() {
    **const { children, otherProps, activetabkey } = this.state;
    console.log(activetabkey)**;
    return (
          <div className="card-container">
            <Tabs
              centered
              **defaultActiveKey={activetabkey}**
              type="card"
              size={"small"}
              {...otherProps}
              tabBarStyle={{ marginBottom: 2 }}
            >
              {children}
            </Tabs>
          </div>
        );
  }

export default CustomTab;
export { tabActiveContext };

以下是点击组件并使用上下文调用更改的代码。

 let { setActivetab } = useContext(tabActiveContext);
  const handleClickThumbnail = () => {
    setActivetab("3");
  };

我不知道如何在类中绑定上下文来改变状态。 一点帮助将不胜感激。 另外，我想知道当我单击其他组件中的任何内容时更改选项卡的最佳方式。当该类中有来自 App 组件的其他道具时，我不知道如何共享状态。另一方面，我不知道如何在类构造函数中绑定上下文方法。

Answer 1

基本上你想要做的是通过在Tabs 上设置activeKey prop 来使antd 选项卡受控组件。

现在您的tabActiveContext 具有更改活动选项卡的功能，但它无法告诉您活动选项卡是什么。我们在上下文中想要这两个东西。

const TabActiveContext = React.createContext({
  setActivetab: (at) => {},
  activeTab: "",
});

我假设您想从这个CustomTab 组件之外的某个地方设置活动选项卡。因此，您需要一个包含活动选项卡状态的上下文提供程序。此提供程序必须位于您要控制的 CustomTab 和您要控制它的组件之外。

export const TabActiveProvider = ({ children, initialActiveKey }) => {
  const [activeTab, setActiveTab] = useState(initialActiveKey);
  return (
    <TabActiveContext.Provider
      value={{
        activeTab,
        setActiveTab
      }}
    >
      {children}
    </TabActiveContext.Provider>
  );
};

在函数组件中处理上下文要容易得多。仅供参考，您没有理由将道具存储在状态中 - 只需使用道具！

const CustomTab = ({ children, ...props }) => {
  const { activeTab, setActiveTab } = useContext(TabActiveContext);
  return (
    <div className="card-container">
      <Tabs
        centered
        type="card"
        size={"small"}
        tabBarStyle={{ marginBottom: 2 }}
        {...props}
        activeKey={activeTab} // current tab is controlled by state
        onChange={setActiveTab} // update state when tab changes
      >
        {children}
      </Tabs>
    </div>
  );
};

---

这是一个完整的演示代码，展示了如何从外部组件修改选项卡。

import React, { useContext, useState } from "react";
import "antd/dist/antd.css";
import { Button, Tabs, TabsProps } from "antd";
const { TabPane } = Tabs;

export const TabActiveContext = React.createContext({
  setActiveTab: (at) => {},
  activeTab: ""
});

const CustomTab = ({ children, ...props }) => {
  const { activeTab, setActiveTab } = useContext(TabActiveContext);
  return (
    <div className="card-container">
      <Tabs
        centered
        type="card"
        size={"small"}
        tabBarStyle={{ marginBottom: 2 }}
        {...props}
        activeKey={activeTab} // current tab is controlled by state
        onChange={setActiveTab} // update state when tab changes
      >
        {children}
      </Tabs>
    </div>
  );
};

export const TabActiveProvider = ({ children, initialActiveKey }) => {
  const [activeTab, setActiveTab] = useState(initialActiveKey);
  return (
    <TabActiveContext.Provider
      value={{
        activeTab,
        setActiveTab
      }}
    >
      {children}
    </TabActiveContext.Provider>
  );
};

// some component that modifies the tab state
const OtherComponent = () => {
  const { setActiveTab } = useContext(TabActiveContext);

  return <Button onClick={() => setActiveTab("2")}>Go To Tab #2</Button>;
};

export default () => (
  <TabActiveProvider initialActiveKey="1">
    <OtherComponent />
    <CustomTab>
      <TabPane tab="Tab 1" key="1">
        Content of Tab Pane 1
      </TabPane>
      <TabPane tab="Tab 2" key="2">
        Content of Tab Pane 2
      </TabPane>
      <TabPane tab="Tab 3" key="3">
        Content of Tab Pane 3
      </TabPane>
    </CustomTab>
  </TabActiveProvider>
);

CodeSandbox Link