我有一个来自语义UI React(https://react.semantic-ui.com/modules/dropdown/)的Dropdown组件。
当前,下拉列表填充了API调用返回的数据:
[
{href: 'https://blah blah.com',
text: 'text to display in the dropdown'}
]
在下拉列表中有一些文本显示为指向外部网页的链接。我可以输入搜索内容,单击列表中的项目,然后转到该特定下拉项目的链接。我想做的是能够搜索该项目,然后单击Enter键以选择该项目,然后转到该项目的链接。有人知道我该怎么做吗?目前,按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;