Material UI -如何使用自动完成功能创建搜索栏(从Firebase获取)

Question

我是一个新的全栈开发新手，我正在尝试向我的客户端(使用MUI和Redux的React Js )添加一个搜索栏，用于搜索云firestore集合中的文档名称(或文档中的值)。我不知道该怎么做，有什么建议吗？我将向您展示我的导航条代码(我将在其中添加一个搜索栏)。

Navbar.js

import React, { Component, Fragment } from 'react';
import {Link} from 'react-router-dom';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import MyButton from '../../utils/MyButton'
import NewPost from '../post/NewPost'
import withStyles from '@material-ui/core/styles/withStyles';
//MUI
import TextField from '@material-ui/core/TextField';
import Select from '@material-ui/core/Select';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Button from '@material-ui/core/Button';
import Drawer from '@material-ui/core/Drawer'
import IconButton from '@material-ui/core/IconButton';
//icons
import HomeIcon from '@material-ui/icons/Home'
import ChatIcon from '@material-ui/icons/Chat';
import Menu from '@material-ui/icons/Menu'
import Notifications from './Notifications'
import { List, ListItem, ListItemText,ListItemIcon, TextField } from '@material-ui/core';


const styles = {
    draw: {
        backgroundColor: "primary"
    }
}

 class Navbar extends Component {
    constructor(props) {
        super(props);
        this.state = {
          open: false,
          game:'ygo',
          query:'',
        };
    }
    gameChange = (event) => {
        this.setState({game: event.target.value});
    };

    searchChange = (event) =>{
        this.setState({query: event.target.value})
    }

    render() {
        var { authenticated, classes} = this.props;
        //const [open, setOpen] = useState(false);
        const handleDrawer = () =>{
            this.setState({ open: true })
        }
        const { open } = this.state;
        const ITEM_HEIGHT = 48;
        const ITEM_PADDING_TOP = 8;
        const MenuProps = {
            PaperProps: {
              style: {
                maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
                width: 250,
              },
            },
        };
        if(authenticated===true){
            var { authenticated, classes,user:{credentials:{ygo,mtg,kf}}} = this.props;
        }


        return (
            
            <AppBar position="fixed">
                <Toolbar className="nav-container">
                    {authenticated ? (
                        <Fragment>
                            <IconButton edge="start" onClick={handleDrawer} >
                                <Menu/>
                            </IconButton>
                            <Notifications />
                            <TextField
                                name="search"
                                floatingLabelText="Cerca"
                                value={this.state.query}
                                onChange={this.searchChange}
                                floatingLabelFixed
                            />

                        </Fragment>
                        

                    ):(
                        <Fragment>
                            <Button color="inherit" component={Link} to="/login">Login</Button>
                            <Button color="inherit" component={Link} to="/signup">Singup</Button>
                            <Button color="inherit" component={Link} to="/">Home</Button>
                        </Fragment>
                    )}
                </Toolbar>
            </AppBar>

            
        )
    }
}

Navbar.propTypes = {
    authenticated:  PropTypes.bool.isRequired,
    user: PropTypes.object.isRequired,
    classes: PropTypes.object.isRequired
}

const mapStateToProps = state =>({
    authenticated: state.user.authenticated,
    user: state.user,
    game: state.UI
})

export default connect(mapStateToProps)(withStyles(styles)(Navbar))

Answer 1

我相信你正在寻找的东西是

https://material-ui.com/components/autocomplete/#free-solo