Как отобразить две ссылки, основанные на выборе варианта удаления? - PullRequest
Новая
       12

Как отобразить две ссылки, основанные на выборе варианта удаления?

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

Я дал простой вариант выпадающего меню. Здесь я хочу отобразить две ссылки, основанные на выборе.

Я добавляю две опции меню со значениями ключей, таких как CULT-4a и HIN-4A, и добавляю щелчок ручкиФункция. Теперь, если я хочу выбрать отображение CULT-4a с 2-мя ссылками. Как его отобразить. На основе выбора мне нужно отобразить ссылки. Здесь я возвращаю ссылки, но они не отображаются. 

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

    handleMenuClick = (e) => {
        if (e.key === '1') {
          alert("cultA");
          this.setState({
            visible: true,
        })
        }
        else {
            alert("HIN");
        }
      }

    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>
                  <DisplayLinks visible={this.state.visible}/>
                </Dropdown>
            </div>
        )
    }
}

Здесь я добавляю свой код компонента DisplayLink.js 

render() {
        return (
            <div align="center">
            <a href="#" onClick={this.showCourseModal}>Course</a>
            <a href="#" onClick={this.showStudentList}>StudentList</a            

        )
    }

1 Ответ

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

Вы возвращаете две ссылки, но нигде их не используете.Вам необходимо прикрепить его к элементу, который зависит от состояния или реквизита для отображения 

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

class DropOption extends React.Component {
    state = {
        visible: false,
        dropdownOptions : <a className="ant-dropdown-link" href="#">
                        Select one option<Icon type="down" />
                    </a>
    };

    handleMenuClick = (e) => {
        if (e.key === '1') {
        alert("cultA");
        this.setState({
            dropdownOptions :  <span>
            <a href="#">Course</a>
            <a href="#">StudentList</a>
        </span>
        })
        }
        else {
            alert("HIN");
        }
    }

    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}>
                    this.state.dropdownOptions
                </Dropdown>
            </div>
        )
    }
}

export default DropOption
...