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

Posted 2023-03-05

【中文标题】材质 ui 自动完成，带有图标

【英文标题】：material ui autoComplete with icons

【发布时间】：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。在主帖中添加了代码。看看吧。

【参考方案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" 
        />
    )
  />