Блог

У меня есть выпадающий компонент из semantic-ui React (https://react.semantic-ui.com/modules/dropdown /).

В настоящее время выпадающий список заполняется данными из вызова API, который возвращает:

 [
{href: 'https://blah blah.com',
text: 'text to display in the dropdown'}
]
  

В выпадающем списке отображается текст, который отображается в виде элементов, которые являются ссылками на внешние веб-страницы. Я могу ввести в поиск, щелкнуть по элементу в списке, и я перейду по ссылке для этого конкретного выпадающего списка. Что я хотел бы сделать, так это иметь возможность искать элемент и нажимать клавишу ввода, чтобы выбрать элемент и перейти по ссылке для этого элемента. Кто-нибудь знает, как я могу это сделать? В настоящее время нажатие Enter просто выбирает элемент и отображает его в раскрывающемся списке поиска, фактически не вызывая ссылку на элемент.

Вот мой код:

 import React, { Component } from "react";
import { Dropdown } from "semantic-ui-react";

const snippets = [];

class SearchableDropdown extends Component {
  state = {
    success: false,
    textValue: "",
    topic: this.props.topic,
    data: [],
  };


  async componentDidMount() {
    let topics = window.location.pathname;
      
    const res = await fetch(`http://localhost:5000/api${topics}`);

    const jsonData = await res.json();
    const info = jsonData;
    const data = Object.keys(info).map((key) => {
      return {
        topic: info[key].topic,
        card_title: info[key].card_title,
        card_subtitle: info[key].card_subtitle,
        card_gif: info[key].card_gif,
        card_link: info[key].card_link,
      };
    });
    this.setState({ data });

    let topicInfo = this.state.data;
    topicInfo.forEach((item) =>
      snippets.push({
        text: `${item.card_title} | ${item.card_subtitle}`,
        value: `${item.card_title} | ${item.card_subtitle}`,
        href: `${item.card_link}`,
      })
    );
    }
  }

  render() {
    let topic = this.props.topic;

    return (
      <Dropdown
        placeholder="Search Snippets"
        fluid
        search
        selection
        options={snippets}
        onChange={this.handleChange}
        style={{
          backgroundColor: "whitesmoke",
          border: "1px solid black",
          display: "block",
          margin: "auto",
          width: "50%",
          marginTop: "30px",
        }}
      />
    );
  }
}

export default SearchableDropdown;