材质 UI 自动完成标签动画不起作用
Posted
技术标签:
【中文标题】材质 UI 自动完成标签动画不起作用【英文标题】：Material UI autocomplete label animation not working 【发布时间】：2019-11-25 20:24:32 【问题描述】：您好，我是 React 和 Material UI 的新手。在这里，我尝试实现材质 UI 自动完成https://codesandbox.io/s/runh6（带芯片的多选）。在这里，我实现了，一切正常。但文字动画不工作。我想要像材料 ui 文本框标签这样的文本动画。
https://codesandbox.io/s/6e1dp.
我已添加 label:'country'，但文本显示为静态。它没有显示任何动画。
我最近两天被击中了。谁能帮我解决这个问题。
【问题讨论】：
我不认为他们应该动画，检查文档material-ui.com/components/text-fields/#input-adornments material-ui.com/components/text-fields/#input-adornments 【参考方案1】：Here 对你来说是个好建议。但这只会选择单个国家/地区。
所以这个例子只适用于你只有一个选择。
示例代码：
import React from 'react';
import deburr from 'lodash/deburr';
import Autosuggest from 'react-autosuggest';
import match from 'autosuggest-highlight/match';
import parse from 'autosuggest-highlight/parse';
import TextField from '@material-ui/core/TextField';
import Paper from '@material-ui/core/Paper';
import MenuItem from '@material-ui/core/MenuItem';
import Popper from '@material-ui/core/Popper';
import
makeStyles
from '@material-ui/core/styles';
const suggestions = [
label: 'Afghanistan'
,
label: 'Aland Islands'
,
label: 'Albania'
,
label: 'Algeria'
,
label: 'American Samoa'
,
label: 'Andorra'
,
label: 'Angola'
,
label: 'Anguilla'
,
label: 'Antarctica'
,
label: 'Antigua and Barbuda'
,
label: 'Argentina'
,
label: 'Armenia'
,
label: 'Aruba'
,
label: 'Australia'
,
label: 'Austria'
,
label: 'Azerbaijan'
,
label: 'Bahamas'
,
label: 'Bahrain'
,
label: 'Bangladesh'
,
label: 'Barbados'
,
label: 'Belarus'
,
label: 'Belgium'
,
label: 'Belize'
,
label: 'Benin'
,
label: 'Bermuda'
,
label: 'Bhutan'
,
label: 'Bolivia, Plurinational State of'
,
label: 'Bonaire, Sint Eustatius and Saba'
,
label: 'Bosnia and Herzegovina'
,
label: 'Botswana'
,
label: 'Bouvet Island'
,
label: 'Brazil'
,
label: 'British Indian Ocean Territory'
,
label: 'Brunei Darussalam'
,
];
function renderInputComponent(inputProps)
const
classes,
inputRef = () => ,
ref,
...other
= inputProps;
return ( <
TextField fullWidth InputProps =
inputRef: node =>
ref(node);
inputRef(node);
,
classes:
input: classes.input,
,
...other
/> ); function renderSuggestion(suggestion, query, isHighlighted ) const matches = match(suggestion.label, query); const parts = parse(suggestion.label, matches);
return ( <
MenuItem selected =
isHighlighted
component = "div" >
<
div >
parts.map(part => ( <
span key =
part.text
style =
fontWeight: part.highlight ? 500 : 400
>
part.text
<
/span> )) <
/div> <
/MenuItem>
);
function getSuggestions(value)
const inputValue = deburr(value.trim()).toLowerCase();
const inputLength = inputValue.length;
let count = 0;
return inputLength === 0 ? [] : suggestions.filter(suggestion =>
const keep = count <
5 && suggestion.label.slice(0,
inputLength).toLowerCase() === i nputValue;
if (keep)
count += 1;
return keep;
);
function getSuggestionValue(suggestion)
return suggestion.label;
const useStyles = m akeStyles(theme => (
root:
height: 250,
flexGrow: 1,
,
container:
position: 'relative',
,
suggestionsContainerOpen:
position: 'absolute',
zIndex: 1,
marginTop: theme.spacing(1),
left: 0,
right: 0,
,
suggestion:
display: 'block',
,
suggestionsList:
margin: 0,
padding: 0,
listStyleType: 'none',
,
divider:
height: theme.spacing(2),
,
));
export default function IntegrationAutosuggest()
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
const [state, setState] = React.useState(
single: '',
popper: '',
);
const [stateSuggestions, setSuggestions] = React.useState([]);
const handleSuggestionsFetchRequested = (
value
) =>
setSuggestions(getSuggestions(value));
;
const handleSuggestionsClearRequested = () =>
setSuggestions([]);
;
const handleChange = name => (event,
newValue
) =>
setState( ...state,
[name]: newValue,
);
;
const autosuggestProps =
renderInputComponent,
suggestions: stateSuggestions,
onSuggestionsFetchRequested: handleSuggestionsFetchRequested,
onSuggestionsClearRequested: handleSuggestionsClearRequested,
getSuggestionValue,
renderSuggestion,
;
return ( <
div className =
classes.root
>
<
Autosuggest ...autosuggestProps
inputProps =
classes,
id: 'react-autosuggest-simple',
label: 'Country',
placeholder: 'Search a country (start with a)',
value: state.single,
onChange: handleChange('single'),
theme =
container: classes.container,
suggestionsContainerOpen: classes.suggestionsContainerOpen,
suggestionsList: classes.suggestionsList,
suggestion: classes.suggestion,
renderSuggestionsContainer =
options => ( <
Paper ...options.containerProps
square >
options.children
<
/Paper>
)
/> <
div className =
classes.divider
/> <
Autosuggest ...autosuggestProps
inputProps =
classes,
id: 'react-autosuggest-popper',
label: 'Country',
placeholder: 'With Popper',
value: state.popper,
onChange: handleChange('popper'),
inputRef: node =>
setAnchorEl(node);
,
InputLabelProps:
shrink: true,
,
theme =
suggestionsList: classes.suggestionsList,
suggestion: classes.suggestion,
renderSuggestionsContainer =
options => ( <
Popper anchorEl =
anchorEl
open =
Boolean(options.children)
>
<
Paper square ...options.containerProps
style =
width: anchorEl ? anchorEl.clientWidth : undefined
>
options.children
<
/Paper> <
/Popper>
)
/> <
/div>
);
希望这会有所帮助。
【讨论】：
以上是关于材质 UI 自动完成标签动画不起作用的主要内容，如果未能解决你的问题，请参考以下文章