javascript - How to get value of Dropdown component in Ant Design (Antd), React js - Stack Overflow

admin管理员组

文章数量:1279182

I have an issue that I can not take out the value of Dropdown to setState or something like that. Does everyone know how to fix it? I tried to access on it by onChange but still not working.

The code is below:

const menu = (
    <Menu onSelect={(e) => console.log(e)}>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer">
          Remended
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer">
          Newest
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer">
          Lowest Price
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer">
          Highest Price
        </a>
      </Menu.Item>
    </Menu>
  );


<Dropdown overlay={menu1} trigger={['click']}>
            <a
              className="ant-dropdown-link"
              onClick={(e) => e.preventDefault()}
              style={{ color: '#d46b08', fontWeight: 'bold' }}
            >
              PRICE <DownOutlined />
            </a>
</Dropdown> ```

I have an issue that I can not take out the value of Dropdown to setState or something like that. Does everyone know how to fix it? I tried to access on it by onChange but still not working.

The code is below:

const menu = (
    <Menu onSelect={(e) => console.log(e)}>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer">
          Remended
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer">
          Newest
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer">
          Lowest Price
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer">
          Highest Price
        </a>
      </Menu.Item>
    </Menu>
  );


<Dropdown overlay={menu1} trigger={['click']}>
            <a
              className="ant-dropdown-link"
              onClick={(e) => e.preventDefault()}
              style={{ color: '#d46b08', fontWeight: 'bold' }}
            >
              PRICE <DownOutlined />
            </a>
</Dropdown> ```

• javascript
• reactjs
• antd

Share Improve this question Follow asked Sep 15, 2020 at 16:12 David HoàngDavid Hoàng 5111 gold badge11 silver badge33 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You may use the following:

export const items = [
  {
    label: "View Profile",
    key: "view-profile",
  },
];

  const handleDropdownItemClick = (e) => {
    console.log(e.key);
  };

 <Dropdown
            menu={{
              onClick: handleDropdownItemClick,
              items: items,
            }}
            placement="bottomRight"
            className="text-white"
          >
            <a>
              <Space>
                <DownOutlined />
              </Space>
            </a>
  </Dropdown>

In order to get the value of the selected menu on dropdown, you need to assign a key on each menu item and then you can use onClick prop of the Menu ponent to get the value or the key.

const handleClick = ({key}) => {
  console.log(key)
  //you can perform setState here
}

const menu = (
  <Menu onClick={handleClick}>
    <Menu.Item key="Remend">Remend</Menu.Item>
    <Menu.Item key="Newest">Newest</Menu.Item>
    <Menu.Item key="Lowest Price">Lowest Price</Menu.Item>
    <Menu.Item key="Highest Price">Highest Price</Menu.Item>
  </Menu>
);

<Dropdown overlay={menu} trigger={["click"]}>
    <a
      className="ant-dropdown-link"
      onClick={(e) => e.preventDefault()}
      style={{ color: "#d46b08", fontWeight: "bold" }}
    >
      PRICE <DownOutlined />
    </a>
</Dropdown>

check it working here for reference.

The Dropdown ponent does not call any onChange property. It has onVisibleChange property that gets called every time the "dropdown trigger" (be it hover, click, right-click) is done. Do something like this:

const SomeComponent = _props =>
{
  const [visible, setVisible] = React.useState(false);
  
  return (<Dropdown overlay={menu} visible={visible} onVisibleChange={isVisible => setVisible(isVisible)} >
    <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
      Hover me <DownOutlined />
    </a>
  </Dropdown>);
}

Working pen here

本文标签： javascriptHow to get value of Dropdown component in Ant Design (Antd)React jsStack Overflow