Antd 我需要点击两次才能更改标签

Question

我使用 antd（版本 3.26.7）选项卡和 react-router-hash-link 用于每个选项卡，以便用户能够使用锚点复制 url 并分享（已复制 url 在需要的锚上打开）。

问题是我需要在选项卡上单击两次才能更改活动选项卡。我的建议是，这可能是因为我在选项卡中使用了 <link>。但是没有 <link> 我无法创建工作锚点。

这是我的代码：

import React, { Component } from "react";
import { Tabs } from "antd";
import "./styles.scss";
import { HashLink as Link } from "react-router-hash-link";
import { createBrowserHistory } from "history";

const history = createBrowserHistory();
const { TabPane } = Tabs;

export default class CustomerService extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeTab: ""
    };
  }

  componentDidMount() {
    const hash = this.props.location.hash || "#";
    let activeKey;
    if (hash === "#") {
      activeKey = "cancellation-and-return-policy";
      this.setState({ activeTab: activeKey });
    } else if (hash === "#privacy-policy") {
      activeKey = "privacy-policy";
      this.setState({ activeTab: activeKey });
      history.push(`/#${activeKey}`);
    } else if (hash === "#cancellation-and-return-policy") {
      activeKey = "cancellation-and-return-policy";
      this.setState({ activeTab: activeKey });
      history.push(`/#${activeKey}`);
    } else if (hash === "#warranty") {
      activeKey = "warranty";
      this.setState({ activeTab: activeKey });
      history.push(`/#${activeKey}`);
    } else if (hash === "#terms-and-conditions") {
      activeKey = "terms-and-conditions";
      this.setState({ activeTab: activeKey });
      history.push(`/#${activeKey}`);
    } else if (hash === "#faqs") {
      activeKey = "faqs";
      this.setState({ activeTab: activeKey });
      history.push(`/#${activeKey}`);
    }
  }

  handleTabClick = () => {
    const hash = this.props.location.hash || "#";
    let activeKey;
    if (hash === "#") {
      activeKey = "cancellation-and-return-policy";
      this.setState({ activeTab: activeKey });
    } else if (hash === "#privacy-policy") {
      activeKey = "privacy-policy";
      this.setState({ activeTab: activeKey });
      history.push(`/#${activeKey}`);
    } else if (hash === "#cancellation-and-return-policy") {
      activeKey = "cancellation-and-return-policy";
      this.setState({ activeTab: activeKey });
      history.push(`/#${activeKey}`);
    } else if (hash === "#warranty") {
      activeKey = "warranty";
      this.setState({ activeTab: activeKey });
      history.push(`/#${activeKey}`);
    } else if (hash === "#terms-and-conditions") {
      activeKey = "terms-and-conditions";
      this.setState({ activeTab: activeKey });
      history.push(`/#${activeKey}`);
    } else if (hash === "#faqs") {
      activeKey = "faqs";
      this.setState({ activeTab: activeKey });
      history.push(`/#${activeKey}`);
    }
  };
  render() {
    return (
      <div className="customer-service-container">
        <div className="tabs-container">
          <Tabs
            // defaultActiveKey={this.state.activeTab}
            onChange={this.handleTabClick}
            activeKey={this.state.activeTab}
          >
            <TabPane
              tab={
                <Link to="/#cancellation-and-return-policy">
                  CANCELLATION AND RETURN POLICY
                </Link>
              }
              key="cancellation-and-return-policy"
            >
              <div className="cancellation-policy">
                <h2 id="cancellation-and-return-policy">CANCELLATION POLICY</h2>
                <div>
                  Maecenas in dictum arcu. Ut aliquet, magna non dictum rhoncus,
                  sem neque feugiat ante, ut dignissim ligula ipsum accumsan
                  urna.
                </div>
              </div>
            </TabPane>
            <TabPane tab={<Link to="/#warranty">WARRANTY</Link>} key="warranty">
              <div className="warranty-container">
                <h2 id="warranty">
                  WARRANTY REPLACEMENT FORM ENGLISH FORMULAIRE DE REMPLACEMENT
                  DE GARANTIE
                </h2>
                <div>
                  Maecenas in dictum arcu. Ut aliquet, magna non dictum rhoncus,
                  sem neque feugiat ante, ut dignissim ligula ipsum accumsan
                  urna.
                </div>
              </div>
            </TabPane>
            <TabPane
              tab={<Link to="/#privacy-policy">PRIVACY POLICY</Link>}
              key="privacy-policy"
            >
              <div className="privacy-container">
                <h2 id="privacy-policy">PRIVACY POLICY</h2>
                <div>
                  Maecenas in dictum arcu. Ut aliquet, magna non dictum rhoncus,
                  sem neque feugiat ante, ut dignissim ligula ipsum accumsan
                  urna.
                </div>
              </div>
            </TabPane>
            <TabPane
              tab={<Link to="/#terms-and-conditions">TERMS & CONDITIONS</Link>}
              key="terms-and-conditions"
            >
              <div className="terms-container">
                <h2 id="terms-and-conditions">TERMS & CONDITIONS</h2>
                <div>
                  Maecenas in dictum arcu. Ut aliquet, magna non dictum rhoncus,
                  sem neque feugiat ante, ut dignissim ligula ipsum accumsan
                  urna.
                </div>
              </div>
            </TabPane>
            <TabPane tab={<Link to="/#faqs">FAQs</Link>} key="faqs">
              <div className="faqs-container">
                <h2 id="faqs">FAQs</h2>
                <div>
                  Maecenas in dictum arcu. Ut aliquet, magna non dictum rhoncus,
                  sem neque feugiat ante, ut dignissim ligula ipsum accumsan
                  urna.
                </div>
              </div>
            </TabPane>
          </Tabs>
        </div>
      </div>
    );
  }
}

我尝试在 codesandbox 中创建工作示例：https://codesandbox.io/s/compassionate-proskuriakova-hvybz 但不幸的是，它并没有真正起作用：当我单击选项卡时，它们没有改变，只有 url 被改变了。在本地，所有工作选项卡都已更改 url 但要再次实现此目的，我需要单击选项卡两次。

很确定没有什么困难，但我做不到。我知道没有足够的信息，尤其是 codesandbox 失败，但也许有人已经遇到过同样的问题？

如有任何帮助，我们将不胜感激。

Answer 1

用这个替换你的代码我已经更改了 handleTableClick & tabs 键。这是工作。您可以检查是否将此代码粘贴到您的 codesandbox

import React, { Component } from "react";
import { Tabs } from "antd";
import "./styles.scss";
import "antd/dist/antd.css";
import { createBrowserHistory } from "history";

const history = createBrowserHistory();
const { TabPane } = Tabs;

export default class CustomerService extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeTab: ""
    };
  }

  componentDidMount() {
    const hash = this.props.location.hash || "cancellation-and-return-policy";
    let activeKey;
    if (hash === "cancellation-and-return-policy") {
      activeKey = "cancellation-and-return-policy";
      this.setState({ activeTab: activeKey });
    } else if (hash === "#privacy-policy") {
      activeKey = "privacy-policy";
      this.setState({ activeTab: activeKey });
      history.push(`/#${activeKey}`);
    } else if (hash === "#cancellation-and-return-policy") {
      activeKey = "cancellation-and-return-policy";
      this.setState({ activeTab: activeKey });
      history.push(`/#${activeKey}`);
    } else if (hash === "#warranty") {
      activeKey = "warranty";
      this.setState({ activeTab: activeKey });
      history.push(`/#${activeKey}`);
    } else if (hash === "#terms-and-conditions") {
      activeKey = "terms-and-conditions";
      this.setState({ activeTab: activeKey });
      history.push(`/#${activeKey}`);
    } else if (hash === "#faqs") {
      activeKey = "faqs";
      this.setState({ activeTab: activeKey });
      history.push(`/#${activeKey}`);
    }
  }

  handleTabClick = key => {
    this.setState({ activeTab: key });
    history.push(`/#${key}`);
  };

  render() {
    return (
      <div className="customer-service-container">
        <div className="tabs-container">
          <Tabs
            defaultActiveKey={this.state.activeTab}
            onChange={this.handleTabClick}
            activeKey={this.state.activeTab}
          >
            <TabPane
              tab="cancellation-and-return-policy"
              key="cancellation-and-return-policy"
            >
              <div className="cancellation-policy">
                <h2 id="cancellation-and-return-policy">CANCELLATION POLICY</h2>
                <div>
                  Maecenas in dictum arcu. Ut aliquet, magna non dictum rhoncus,
                  sem neque feugiat ante, ut dignissim ligula ipsum accumsan
                  urna.
                </div>
              </div>
            </TabPane>
            <TabPane tab="warranty" key="warranty">
              <div className="warranty-container">
                <h2 id="warranty">
                  WARRANTY REPLACEMENT FORM ENGLISH FORMULAIRE DE REMPLACEMENT
                  DE GARANTIE
                </h2>
                <div>
                  Maecenas in dictum arcu. Ut aliquet, magna non dictum rhoncus,
                  sem neque feugiat ante, ut dignissim ligula ipsum accumsan
                  urna.
                </div>
              </div>
            </TabPane>
            <TabPane tab="privacy-policy" key="privacy-policy">
              <div className="privacy-container">
                <h2 id="privacy-policy">PRIVACY POLICY</h2>
                <div>
                  Maecenas in dictum arcu. Ut aliquet, magna non dictum rhoncus,
                  sem neque feugiat ante, ut dignissim ligula ipsum accumsan
                  urna.
                </div>
              </div>
            </TabPane>
            <TabPane tab="terms-and-conditions" key="terms-and-conditions">
              <div className="terms-container">
                <h2 id="terms-and-conditions">TERMS & CONDITIONS</h2>
                <div>
                  Maecenas in dictum arcu. Ut aliquet, magna non dictum rhoncus,
                  sem neque feugiat ante, ut dignissim ligula ipsum accumsan
                  urna.
                </div>
              </div>
            </TabPane>
            <TabPane tab="faqs" key="faqs">
              <div className="faqs-container">
                <h2 id="faqs">FAQs</h2>
                <div>
                  Maecenas in dictum arcu. Ut aliquet, magna non dictum rhoncus,
                  sem neque feugiat ante, ut dignissim ligula ipsum accumsan
                  urna.
                </div>
              </div>
            </TabPane>
          </Tabs>
        </div>
      </div>
    );
  }
}

希望这会有所帮助。

Antd 我需要点击两次才能更改标签

Antd I need to click twice to change the tab

reactjs

antd

hashlink