材质 ui 自动完成，带有图标答案

【问题标题】：material ui autoComplete with icons材质 ui 自动完成，带有图标
【发布时间】：2020-04-11 20:03:41
【问题描述】：

您好，我正在尝试使用显示文本旁边的图标来实现材质 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>

                    )}
                />

【问题讨论】：

找到了一个修复程序。通过材料 api，要渲染我需要使用 renderOption 的特殊标签，以及标签 getOptionLabel。在主帖中添加了代码。看看吧。

标签： reactjs select autocomplete icons material-ui

【解决方案1】：

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

<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" 
        />
    )}
  />

【讨论】：