带有图标的材料ui自动完成 [英] material ui autoComplete with icons
本文介绍了带有图标的材料ui自动完成的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好，我正在尝试使用显示的文字旁边的图标来实现实质性的UI自动完成下拉框.我的实现工作正常，但是当我选择其中一个选项时，它没有显示.问题出在这部分代码上:
renderInput = {params =>(<片段>< TextField{... params}variant ="outlined"label =选择帐户"placeholder =收藏夹"margin =正常"全屏宽度/></片段>)} 如果我从 getOptionLabel 中删除他的图标呈现，那么在选择所选文本时显示就很好了.任何帮助将不胜感激.现在，此代码的结果如下所示:
从'react'导入React，{Fragment，useState};从'react-redux'导入{connect};从'prop-types'导入PropTypes;从"@ material-ui/core"导入{makeStyles}；从"@ material-ui/lab/自动完成/自动完成"导入自动完成；从"@ material-ui/core/TextField"导入TextField；从'@ material-ui/icons/Facebook'导入FacebookIcon；从'@ material-ui/icons/Apple'导入AppleIcon；从"@ material-ui/core/IconButton"导入IconButton；const useStyles = makeStyles(theme =>({选择: {宽度:425，}，图标: {颜色:#0095e2"}，}));const SelectAccount =({clientAccountsData，accountSelected})=>{const accountSelectedHandler = async(event，values)=>{如果(值！== null){accountSelected(values);}别的 {accountSelected('');}};const renderCorrectAccountChannelIcon =(network_id)=>{如果(network_id ==='1'){返回 (< FacebookIcon/>);}否则((network_id ==='2'){返回 (< imgsrc = {'/Icons/snapchat.png'}身高= {30}宽度= {30}/>);}否则((network_id ==='3'){返回 (< imgsrc = {'/Icons/google.png'}高度= {30}宽度= {30}/>);}否则((network_id ==='4'){返回 (< AppleIcon/>);}};const classes = useStyles();返回 (< div className ='material-ui'><自动完成className = {classes.Select}id ="account_select"options = {clientAccountsData}onChange = {accountSelectedHandler}getOptionLabel = {option =>{返回(<片段><图标className = {classes.icon}>{renderCorrectAccountChannelIcon(option.network_id)}</Icon>{option.accountName +'('+ option.accountId +')'}</片段>);}}filterSelectedOptionsrenderInput = {params =>(<片段>< TextField{... params}variant ="outlined"label =选择帐户"placeholder =收藏夹"margin =正常"全屏宽度/></片段>)}/></div>);};SelectAccount.prototypes = {accountSelected:PropTypes.func.isRequired，clientAccountsData:PropTypes.array.isRequired，};const mapStateToProps = state =>({clientAccountsData:state.client.clientAccountsData，});导出默认的connect(mapStateToProps，{})(SelectAccount); 编辑！:找到一个修复程序，我们需要使用renderOption来渲染图标+文本并仅将getOptionLabel用于标签文本看起来像这样:
<自动完成className = {classes.Select}id ="account_select"options = {clientAccountsData}onChange = {accountSelectedHandler}getOptionLabel = {option =>option.accountName +'('+ option.accountNumber +')'}renderOption = {option =>{返回 (<片段><图标className = {classes.icon}>{renderCorrectAccountChannelIcon(option.network_id)}</Icon>{option.accountName +'('+ option.accountNumber +')'}</片段>);}}filterSelectedOptionsrenderInput = {params =>(<片段>< TextField{... params}variant ="outlined"label =选择帐户"placeholder =收藏夹"margin =正常"全屏宽度/></片段>)}/> 解决方案
我想分享一下此解决方案的新衍生版本，该解决方案基于文档中的自动完成示例(
Hi I am trying to implement material UI autocomplete dropbox with an icon next to the displayed text. my implementation is working, but when I select one of the options its not being displayed. The problem is with this part of the code:
renderInput={params => (
<Fragment>
<TextField
{...params}
variant="outlined"
label="Select Account"
placeholder="Favorites"
margin="normal"
fullWidth
/>
</Fragment>
)}
if I remove he icon rendering from getOptionLabel then when selecting the selected text show just fine.
any help would be very much appreciated.
right now the result of this code looks like:
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);
EDIT!: Found a fix, we need to use renderOption to render the icon + text and use getOptionLabel just for the label text it looks like this:
<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>
)}
/>
解决方案
I want to share maybe a new spin off of this solution that is based of the autocomplete example in the documentation (autocomplete demos). Keeps the image in the selected tag as well.
<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"
/>
)}
/>
这篇关于带有图标的材料ui自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
