Как отобразить две ссылки на основе выбранной опции? - PullRequest
Новая
       15

Как отобразить две ссылки на основе выбранной опции?

0 голосов
/ 18 февраля 2019

У меня есть два ключа / значения.На основе выбора я хочу отображать простые ссылки.Если я выберу первый вариант, он отобразит две ссылки, а когда будет выбран второй вариант, он отобразит еще две ссылки.Как их отобразить?

Это мой текущий код 

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

1 Ответ

0 голосов
/ 18 февраля 2019

Вы должны использовать состояние вашего компонента.Вы можете изменить значение состояния вашего компонента, используя метод setState({ key: value }).

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

Значение состояния можно затем использовать в методе Render с помощью this.state.key

<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 для рабочего примера

...