Reactjs 如何连接Algolia和@material ui

介绍如何仅从Algolia中的输入字段创建基本的

搜索框
元素。问题是，Algolia最后看起来很难看

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

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

如果有人有过类似这样的不同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);

从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/InputBase”导入InputBase；
从“@material ui/core/styles/colormipulator”导入{fade}；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/icons/Search”导入SearchIcon；
从“react instantsearch dom”导入{connectSearchBox}；
常量样式=主题=>({
根目录：{
宽度：“100%”，
},
成长：{
flexGrow:1，
},
菜单按钮：{
边缘左：-12，
marginRight:20，
},
标题：{
显示：“无”，
[theme.breakpoints.up（'sm'）：{
显示：“块”，
},
},
搜索：{
位置：'相对'，
borderRadius:theme.shape.borderRadius，
背景色：淡入淡出（theme.palette.common.white，0.15），
“&：悬停”：{
背景色：淡入淡出（theme.palette.common.white，0.25），
},
marginLeft:0，
宽度：“100%”，
[theme.breakpoints.up（'sm'）：{
marginLeft:theme.spating.unit，
宽度：“自动”，
},
},
搜索图标：{
宽度：theme.spacing.unit*9，
高度：“100%”，
位置：'绝对'，
pointerEvents:'无'，
显示：“flex”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
输入根：{
颜色：“继承”，
宽度：“100%”，
},
输入输出：{
paddingTop:theme.spating.unit，
paddingRight:theme.spating.unit，
paddingBottom:theme.spating.unit，
paddingLeft:theme.space.unit*10，
transition:theme.transitions.create（'width'），
宽度：“100%”，
[theme.breakpoints.up（'sm'）：{
宽度：120，
“&：焦点”：{
宽度：200，
},
},
},
});
函数搜索框（{currentRefinement，refine}，props）{
常量{classes}=props；
返回(
优化（event.currentTarget.value）}
占位符=“按名称、状态和关键字搜索目标…”
班级={{
根：classes.inputRoot，
输入：classes.inputInput，
}}
/>
);
}
const CustomSearchBox=connectSearchBox（SearchBox）；
功能搜索AppBar（道具）{
常量{classes}=props；
返回(
如果要使用材质ui搜索框组件而不是Algolia组件，可以使用
connectSearchBox（）；
同步材质ui搜索框和Algolia搜索框API

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

在MaterialUISearchBox组件内部，您将使用Algolia提供的道具：
currentRefinement
和
Refinet（）

this.props.refine（this.currentTarget.value）}
SearchAsyOutType={false}
/>

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

material ui docs上的搜索栏连接到Algolia。很抱歉花了这么长时间才返回@JoshWooding，但是material ui docs网站的实现有太多的依赖性，坦率地说，已经超出了我应用程序的复杂性，但感谢您的输入。我正在挂断css的实现。看来您是否能够修复您的问题问题？
        <InputBase
          placeholder="Search…"
          inputProps={{ "aria-label": "search" }}
          value={this.props.currentRefinement}
          onChange={(e) => this.props.refine(this.currentTarget.value)}
          searchAsYouType={false}
        />