Блог

У меня проблема в том, что я не могу вывести значение выпадающего списка в setState или что-то в этом роде. Все ли знают, как это исправить? Я пытался получить к нему доступ с помощью onChange, но все еще не работает.

Код приведен ниже:

 const menu = (
    <Menu onSelect={(e) => console.log(e)}>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer">
          Recommended
        </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> ```
  

Для того, чтобы получить значение выбранного меню в выпадающем списке, вам нужно назначить ключ для каждого пункта меню, а затем вы можете использовать onClick prop Menu компонента для получения значения или ключа.

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

const menu = (
  <Menu onClick={handleClick}>
    <Menu.Item key="Recommend">Recommend</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>
  

проверьте его работоспособность здесь для справки.

Dropdown Компонент не вызывает никакого onChange свойства. У него есть onVisibleChange свойство, которое вызывается каждый раз, когда выполняется «триггер выпадающего списка» (будь то наведение курсора мыши, щелчок правой кнопкой мыши). Сделайте что-то вроде этого:

 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>);
}
  

Здесь работает ручка

Вы можете использовать следующее:

 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>