如何连接 Algolia 和 @material-ui

Posted 2023-02-22

【中文标题】如何连接 Algolia 和 @material-ui

【英文标题】：How to connect Algolia and @material-ui

【发布时间】：2019-10-08 12:13:32

【问题描述】：

This is the documentation 了解如何仅从 Algolia 中的输入字段创建基本的 SearchBox 元素。问题是，Algolia 最终看起来很丑

这就是material-ui的用武之地。我之前使用过AppBar，它包含一个搜索元素，所以我的想法是在我的AppBar.js组件中实例化SearchBox，但使用material-ui专有的InputBase（而不是无聊的 html input)。

我将在下面粘贴到目前为止的代码，但它拒绝使用用于创建自定义 SearchBox 元素的InputBase（更具体地说，它是相关的道具）进行编译。

如果有人有类似这样的网格化不同 API 的经验，或者认为您可能知道发生了什么，请随时告诉我！

import React from 'react';
import PropTypes from 'prop-types';
import AppBar from '@material-ui/core/Appbar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import InputBase from '@material-ui/core/InputBase';
import fade from '@material-ui/core/styles/colorManipulator';
import withStyles from "@material-ui/core/styles";
import SearchIcon from '@material-ui/icons/Search';
import  connectSearchBox  from 'react-instantsearch-dom';

const styles = theme => (
    root:
        width: '100%',
    ,
    grow:
        flexGrow: 1,
    ,
    menuButton:
        marginLeft: -12,
        marginRight: 20,
    ,
    title:
        display: 'none',
        [theme.breakpoints.up('sm')]:
            display: 'block',
        ,
    ,
    search:
        position: 'relative',
        borderRadius: theme.shape.borderRadius,
        backgroundColor: fade(theme.palette.common.white, 0.15),
        '&:hover':
            backgroundColor: fade(theme.palette.common.white, 0.25),
        ,
        marginLeft: 0,
        width: '100%',
        [theme.breakpoints.up('sm')]:
            marginLeft: theme.spacing.unit,
            width: 'auto',
        ,
    ,
    searchIcon:
        width: theme.spacing.unit * 9,
        height: '100%',
        position: 'absolute',
        pointerEvents: 'none',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    ,
    inputRoot:
        color: 'inherit',
        width: '100%',
    ,
    inputInput:
        paddingTop: theme.spacing.unit,
        paddingRight: theme.spacing.unit,
        paddingBottom: theme.spacing.unit,
        paddingLeft: theme.spacing.unit * 10,
        transition: theme.transitions.create('width'),
        width: '100%',
        [theme.breakpoints.up('sm')]:
            width: 120,
            '&:focus':
                width: 200,
            ,
        ,
    ,
);

function SearchBox(currentRefinement, refine, props)
    const classes = props;
    return(
        <InputBase
            type='search'
            value=currentRefinement
            onChange=event => refine(event.currentTarget.value)
            placeholder="Search for Destination by Name, State, and keywords..."
            classes=
                root: classes.inputRoot,
                input: classes.inputInput,
            
        />
    );



const CustomSearchBox = connectSearchBox(SearchBox);

function SearchAppBar(props)
    const classes = props;
    return(
        <div className=classes.root>
            <AppBar position="static">
                <Toolbar>
                    <Typography className=classes.title variant="h6" color='inherit' noWrap>
                    title
                    </Typography>
                    <div className=classes.grow/>
                    <div className=classes.search>
                        <div className=classes.searchIcon>
                            <SearchIcon/>
                        </div>
                        <CustomSearchBox/>
                    </div>
                </Toolbar>
            </AppBar>
        </div>
    );


SearchAppBar.propTypes = 
    classes: PropTypes.object.isRequired,
;

export default withStyles(styles)(SearchAppBar);

（您可能会说，我在文档方面非常严格 - 我没有尝试任何特别的东西）

【问题讨论】：

material-ui 文档上的搜索栏与 Algolia 相关联。 github.com/mui-org/material-ui/blob/next/docs/src/modules/…

很抱歉花了这么长时间才回复@JoshWooding，但是 material-ui docs 网站实现有很多依赖项，坦率地说超出了我的应用程序的复杂性，但感谢您的输入。我似乎对实现 css 很感兴趣

您的问题解决了吗？

【参考方案1】：

如果你想使用材质ui搜索框组件而不是Algolia的，可以使用connectSearchBox();同步材质ui搜索框和Algolia搜索框API。

import  InstantSearch, connectSearchBox  from "react-instantsearch-dom";
const CustomSearchBox = connectSearchBox(MaterialUISearchBox);

在 MaterialUISearchBox 组件中，您将使用 Algolia 提供的 props：currentRefinement 和 refine()。

        <InputBase
          placeholder="Search…"
          inputProps= "aria-label": "search" 
          value=this.props.currentRefinement
          onChange=(e) => this.props.refine(this.currentTarget.value)
          searchAsYouType=false
        />

有关 Algolia 自定义组件的更多详细信息，请查看 url。

https://www.algolia.com/doc/api-reference/widgets/search-box/react/