Question

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

这是我当前的代码

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

Answer 1

您应该使用组件的状态。您可以使用<div class="form-inline my-2 my-lg-0">  <input class="form-control mr-sm-2" type="text" placeholder="Search" name="searchValued" [(ngModel)]="searchedValue" > <a [routerLink]="['/getSearchedBusiness', searchedValue]" class="btn btn-primary" >Search</a> </div>方法来更改组件的状态值。

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>

有关有效示例，请参见https://codesandbox.io/s/qxjknok10j

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

1 个答案: