我需要点击两次来更改选项卡

Question

我使用antd (3.26.7版)选项卡，并为每个选项卡建立react路由器-散列链接，以便用户能够使用锚和共享复制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，但是要实现这一点，我需要点击该选项卡两次。

当然没什么难的但我搞不懂。我知道没有足够的信息，尤其是代码框失败，但也许有人已经面临同样的问题了？

任何帮助都将不胜感激。

Answer 1

用这个替换您的代码我已经更改了handleTableClick &选项卡键。起作用了。您只需将此代码粘贴到代码框中即可。

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>
    );
  }
}

希望这能帮上忙。