Question

我提供了一个简单的下拉选项。在这里，我想根据选择显示两个链接。

我添加了两个带有键值的菜单选项，例如CULT-4a和HIN-4A，并且添加了句柄单击功能。现在如果我想选择带有2个链接的CULT-4a显示器，如何显示它。我必须显示链接。在这里我返回链接，但未显示。

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            

        )
    }

Answer 1

您将返回两个链接，但是您没有在任何地方使用它们。您需要将其附加到取决于要显示的状态或道具的元素上

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

如何基于放置选项选择显示两个链接？

1 个答案: