如何根据所选选项显示两个链接？答案

【问题标题】：How to display two links based on the selected option?如何根据所选选项显示两个链接？
【发布时间】：2019-02-18 10:26:18
【问题描述】：

我有两个键/值。根据选择，我想显示简单的链接。如果我选择第一个选项，它将显示两个链接，并且选择第二个选项时，它将显示另外两个链接。如何显示它们？

这是我当前的代码

import React from "react"
import { Dropdown, Menu, Icon } from 'antd'

class DropOption extends React.Component {
    state = {
        visible: false,
    };

    handleMenuClick = (e) => {
        if (e.key === '1') {

        }
        else {

        }
      }

    render() {
        const menu = (
            <Menu onClick={this.handleMenuClick}>
                <Menu.Item key="1">CULT-4A</Menu.Item>
                <Menu.Item key="2">HIN-4A</Menu.Item>
            </Menu>
        )
        return (
            <div align="center">
                <Dropdown
                    overlay={menu}>
                    <a className="ant-dropdown-link" href="#">
                        Select one option<Icon type="down" />
                    </a>
                </Dropdown>
            </div>
        )
    }
}

export default DropOption

【问题讨论】：

标签： javascript reactjs gatsby antd

【解决方案1】：

您应该使用组件的状态。您可以使用setState({ key: value }) 方法更改组件的状态值。

handleMenuClick = e => {
  this.setState({ selectedOption: e.key });
};

然后可以通过 this.state.key 在 Render 方法中使用状态值

<div>
  {this.state.selectedOption === "option1" && (
    <ul>
      <li>
        <a href="/link1">Option 1 - link1</a>
      </li>
      <li>
        <a href="/link1">Option 1 - link2</a>
      </li>
    </ul>
  )}
</div>

您还可以从数组中构建菜单：

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Dropdown, Menu, Icon } from "antd";

class DropOption extends React.Component {
  state = { selectedOption : null };

  handleMenuClick = e => {
    this.setState({ selectedOption: e.key });
  };

  items = [
    {
      key: "option1",
      text: "CULT-4A",
      links: [
        { text: "option1 - link1", url: "/linkCULT-1" },
        { text: "option1 - link2", url: "/linkCULT-2" }
      ]
    },
    {
      key: "option2",
      text: "HIN-4A",
      links: [
        { text: "option2 - link1", url: "/linkHIN-1" },
        { text: "option2 - link2", url: "/linkHIN-2" }
      ]
    }
  ];

  render() {
    const currentItem = this.items.find(
      item => item.key === this.state.selectedOption
    );
    const links = currentItem ? currentItem.links : [];

    console.log(links);

    const menu = (
      <Menu onClick={this.handleMenuClick}>
        {this.items.map(item => (
          <Menu.Item key={item.key}>{item.text}</Menu.Item>
        ))}
      </Menu>
    );
    return (
      <div align="center">
        <Dropdown overlay={menu}>
          <a className="ant-dropdown-link" href="#">
            Select one option
            <Icon type="down" />
          </a>
        </Dropdown>
        {links.length > 0 && (
          <div>
            <ul>
              {links.map(link => {
                return (
                  <li key="{link.url}">
                    <a href="{link.url}">{link.text}</a>
                  </li>
                );
              })}
            </ul>
          </div>
        )}
      </div>
    );
  }
}

export default DropOption;
const rootElement = document.getElementById("root");

ReactDOM.render(<DropOption />, rootElement);

有关工作示例，请参阅 https://codesandbox.io/s/qxjknok10j

【讨论】：