带有图标的材料 ui 自动完成

Question

嗨，我正在尝试使用显示文本旁边的图标来实现材质 UI 自动完成保管箱。我的实现正在运行，但是当我选择其中一个选项时，它不会显示。问题在于这部分代码：

renderInput={params => (
                        <Fragment>
                            <TextField
                                {...params}
                                variant="outlined"
                                label="Select Account"
                                placeholder="Favorites"
                                margin="normal"
                                fullWidth
                            />
                        </Fragment>

                    )}

如果我getOptionLabel在选择所选文本时删除他的图标渲染就可以了。任何帮助将不胜感激。现在这段代码的结果如下：

import React, { Fragment, useState } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import {makeStyles} from "@material-ui/core";
import Autocomplete from "@material-ui/lab/Autocomplete/Autocomplete";
import TextField from "@material-ui/core/TextField";
import FacebookIcon from '@material-ui/icons/Facebook';
import AppleIcon from '@material-ui/icons/Apple';
import IconButton from "@material-ui/core/IconButton";


const useStyles = makeStyles(theme => ({
    Select: {
        width: 425,
    },
    icon: {
        color: '#0095e2'
    },
}));

const SelectAccount = ({ clientAccountsData, accountSelected }) => {
    const accountSelectedHandler = async (event, values) => {
        if ( values !== null )
        {
            accountSelected(values);
        }
        else {
            accountSelected('');
        }
    };

    const renderCorrectAccountChannelIcon = (network_id) => {
        if ( network_id=== '1' )
        {
            return (
                <FacebookIcon/>
            );
        }
        else if ( network_id=== '2' )
        {
            return (
                <img
                    src={'/Icons/snapchat.png'}
                    height={30}
                    width={30}
                />
            );
        }
        else if ( network_id=== '3' )
        {
            return (
                <img
                    src={'/Icons/google.png'}
                    height={30}
                    width={30}
                />
            );
        }
        else if ( network_id=== '4' )
        {
            return (
                <AppleIcon/>
            );
        }
    };

    const classes = useStyles();
        return (
            <div className='material-ui'>
                <Autocomplete
                    className={classes.Select}
                    id="account_select"
                    options={clientAccountsData}
                    onChange={accountSelectedHandler}
                    getOptionLabel={option =>
                        {
                            return(
                                <Fragment>
                                    <Icon className={classes.icon}>
                                        {
                                        renderCorrectAccountChannelIcon(option.network_id)
                                        }
                                    </Icon>
                                    {option.accountName + ' (' + option.accountId + ')'}
                                </Fragment>
                            );
                        }
                    }
                    filterSelectedOptions
                    renderInput={params => (
                        <Fragment>
                            <TextField
                                {...params}
                                variant="outlined"
                                label="Select Account"
                                placeholder="Favorites"
                                margin="normal"
                                fullWidth
                            />
                        </Fragment>

                    )}
                />
            </div>
        );
};

SelectAccount.prototypes = {
    accountSelected: PropTypes.func.isRequired,
    clientAccountsData: PropTypes.array.isRequired,
};

const mapStateToProps = state => ({
    clientAccountsData: state.client.clientAccountsData,
});

export default connect(mapStateToProps, {})(SelectAccount);

编辑！：找到了一个修复程序，我们需要使用 renderOption 来呈现图标 + 文本并使用 getOptionLabel 仅用于标签文本，它看起来像这样：

<Autocomplete
                    className={classes.Select}
                    id="account_select"
                    options={clientAccountsData}
                    onChange={accountSelectedHandler}
                    getOptionLabel={option => option.accountName + ' (' + option.accountNumber + ')'}
                    renderOption={option => {
                        return (
                            <Fragment>
                                <Icon className={classes.icon}>
                                    {
                                        renderCorrectAccountChannelIcon(option.network_id)
                                    }
                                </Icon>
                                {option.accountName + ' (' + option.accountNumber + ')'}
                            </Fragment>
                        );
                    }}
                    filterSelectedOptions
                    renderInput={params => (
                        <Fragment>
                            <TextField
                                {...params}
                                variant="outlined"
                                label="Select Account"
                                placeholder="Favorites"
                                margin="normal"
                                fullWidth
                            />
                        </Fragment>

                    )}
                />

Answer 1

我想分享这个解决方案的一个新衍生产品，它基于文档中的自动完成示例（自动完成演示）。也将图像保留在选定的标签中。

<Autocomplete
    multiple
    limitTags={2}
    id="multiple-limit-tags"
    options={top100Films}
    getOptionLabel={(option) => option.title}
    defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
    renderTags={options => 
    {
        return (
            options.map(option =>
                <Fragment>
                    <IconButton color="primary">
                        <img src={'../src/img/Tables.svg'}/> {/*Mock image, attribute in option*/}
                    </IconButton>
                        {option.title}
                </Fragment>))

    }}
    renderOption={option => {
        return (
            <Fragment>
                    <IconButton color="primary">
                        <img src={'../src/img/Tables.svg'}/> {/*Mock image, attribute in option*/}
                    </IconButton>
                {option.title}
            </Fragment>
        );
    }}
    renderInput={(params) => (
        <TextField 
            {...params}
            variant="outlined" 
            label="limitTags" 
            placeholder="Favorites" 
        />
    )}
  />