我一直在尝试让语义 ui 搜索结果出现,但就我的一生而言,搜索时我得到的只是这样:
As you can see, the search results are not visible
我已经在我的index.js 文件中导入了semantic-ui-css:
import "semantic-ui-css/semantic.min.css";
我正在使用一个 super 基础的数据集来测试:
const cities = [
{
key: 0,
city: "New York City",
usState: "New York"
},
{
key: 1,
city: "San Francisco",
usState: "California"
},
{
key: 2,
city: "Chicago",
usState: "Illinois"
}
];
(该数组位于导入之后,但包含在上面是为了缩短代码部分)
并且正在使用 standard search来自文档:
import React from "react";
import { Search } from "semantic-ui-react";
import _ from "lodash";
class SearchBox extends React.Component {
state = {
isLoading: false,
results: [],
value: ""
};
componentWillMount() {
this.resetComponent();
}
resetComponent = () =>
this.setState({ isLoading: false, results: [], value: "" });
handleSearchChange = (e, { value }) => {
this.setState({ isLoading: true, value });
setTimeout(() => {
if (this.state.value.length < 1) this.resetComponent();
const re = new RegExp(_.escapeRegExp(this.state.value), "i");
const isMatch = result => re.test(result.city);
this.setState({
isLoading: false,
results: _.filter(cities, isMatch)
});
}, 500);
};
handleResultSelect = (e, { result }) =>
this.setState({ value: result.city });
render() {
const { isLoading, results, value } = this.state;
return (
<div>
<Search
type="text"
size="big"
loading={isLoading}
results={results}
value={value}
onSearchChange={this.handleSearchChange}
onResultSelect={this.handleResultSelect}
/>
</div>
);
}
}
export default SearchBox;
在编辑语义-ui-react搜索示例时,我什至尝试使用我的数组作为数据,但由于某种原因,结果也不可见。如何使搜索结果可见?
预先感谢您的任何评论或答复!
最佳答案
尝试检查 SearchResult 的正确属性, 因为默认的 SearchResult 组件应该使用具有以下键之一的对象:标题、描述、价格、图像。
参见[ https://react.semantic-ui.com/modules/search#search-example-standard][1]
关于reactjs - Semantic-ui-react:搜索结果不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47455881/