Semantic-ui-react:搜索结果不可见

约翰

我一直试图让语义 ui 搜索结果出现,但对于我的生活,我在搜索时得到的只是:

如您所见,搜索结果不可见

我已经在我的 index.js 文件中导入了语义 UI css:

import "semantic-ui-css/semantic.min.css";

我正在使用一个超级基本的数据集来测试:

const cities = [
    {
        key: 0,
        city: "New York City",
        usState: "New York"
    },
    {
        key: 1,
        city: "San Francisco",
        usState: "California"
    },
    {
        key: 2,
        city: "Chicago",
        usState: "Illinois"
    }
];

(这个数组在导入之后出现,但包含在上面以保持代码部分更短)

并且正在使用文档中标准搜索

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 组件应使用具有以下键之一的对象:title, description, price, image

见 [ https://react.semantic-ui.com/modules/search#search-example-standard][1]

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Semantic-UI 的搜索元素返回 TypeError

来自分类Dev

React CSS Webpack Hashing & Usage with semantic-ui-sass, semantic-ui-react

来自分类Dev

Semantic-UI Dropdown 也在“数据值”中搜索

来自分类Dev

React和Semantic-ui-react,代理事件

来自分类Dev

修复了 react-semantic-ui 中的侧边栏

来自分类Dev

从AngularJS ui分页不可见

来自分类Dev

DAG在Web UI中不可见

来自分类Dev

从AngularJS ui分页不可见

来自分类Dev

React 漂亮的 dnd 不能与 React Semantic UI Table 一起使用

来自分类Dev

如何在Semantic-react-ui的Modal屏幕上显示弹出窗口?

来自分类Dev

react Semantic-UI - 多选复选框下拉菜单

来自分类Dev

为什么在使用“semantic-ui-react”的“Grid”组件时会出现不正确的布局?

来自分类Dev

如何在 React Semantic UI 中的 Progressbar 上设置自定义文本

来自分类Dev

Semantic-UI-React 网格列填充不设置内联列

来自分类Dev

如何在 Semantic-UI-React 下拉菜单中选择图像?

来自分类Dev

如何使用 react-semantic-ui 将选定的值设置为状态

来自分类Dev

Responsive replacement for Semantic UI's navigation menu

来自分类Dev

Swing UI:不可见的组件保持活动状态

来自分类Dev

Swing UI:不可见的组件保持活动状态

来自分类Dev

使用 Semantic-UI 搜索下拉菜单在每个项目的多个值中进行选择

来自分类Dev

require('jquery')vs require('semantic-ui-css'),只有一个可以在Webpack的React编程中起作用

来自分类Dev

Semantic-ui-react:如何在没有点击/悬停的情况下触发弹出窗口?

来自分类Dev

如何在 React -Semantic UI - Dropdown 组件中生成带有数字数组的下拉列表?

来自分类Dev

路线“ ui-route”不起作用。TemplateUrl html在ui视图中不可见

来自分类Dev

路线“ ui-route”不起作用。TemplateUrl html在ui视图中不可见

来自分类Dev

如何将Semantic-UI添加到Phoenix

来自分类Dev

使用Semantic-UI的最低JQuery版本是什么

来自分类Dev

使用Semantic-UI的div的垂直对齐

来自分类Dev

使用Webpack反应Semantic-ui捆绑包的大小太大

Related 相关文章

  1. 1

    Semantic-UI 的搜索元素返回 TypeError

  2. 2

    React CSS Webpack Hashing & Usage with semantic-ui-sass, semantic-ui-react

  3. 3

    Semantic-UI Dropdown 也在“数据值”中搜索

  4. 4

    React和Semantic-ui-react,代理事件

  5. 5

    修复了 react-semantic-ui 中的侧边栏

  6. 6

    从AngularJS ui分页不可见

  7. 7

    DAG在Web UI中不可见

  8. 8

    从AngularJS ui分页不可见

  9. 9

    React 漂亮的 dnd 不能与 React Semantic UI Table 一起使用

  10. 10

    如何在Semantic-react-ui的Modal屏幕上显示弹出窗口?

  11. 11

    react Semantic-UI - 多选复选框下拉菜单

  12. 12

    为什么在使用“semantic-ui-react”的“Grid”组件时会出现不正确的布局?

  13. 13

    如何在 React Semantic UI 中的 Progressbar 上设置自定义文本

  14. 14

    Semantic-UI-React 网格列填充不设置内联列

  15. 15

    如何在 Semantic-UI-React 下拉菜单中选择图像?

  16. 16

    如何使用 react-semantic-ui 将选定的值设置为状态

  17. 17

    Responsive replacement for Semantic UI's navigation menu

  18. 18

    Swing UI:不可见的组件保持活动状态

  19. 19

    Swing UI:不可见的组件保持活动状态

  20. 20

    使用 Semantic-UI 搜索下拉菜单在每个项目的多个值中进行选择

  21. 21

    require('jquery')vs require('semantic-ui-css'),只有一个可以在Webpack的React编程中起作用

  22. 22

    Semantic-ui-react:如何在没有点击/悬停的情况下触发弹出窗口?

  23. 23

    如何在 React -Semantic UI - Dropdown 组件中生成带有数字数组的下拉列表?

  24. 24

    路线“ ui-route”不起作用。TemplateUrl html在ui视图中不可见

  25. 25

    路线“ ui-route”不起作用。TemplateUrl html在ui视图中不可见

  26. 26

    如何将Semantic-UI添加到Phoenix

  27. 27

    使用Semantic-UI的最低JQuery版本是什么

  28. 28

    使用Semantic-UI的div的垂直对齐

  29. 29

    使用Webpack反应Semantic-ui捆绑包的大小太大

热门标签

归档