材质UI自动完成标签动画不起作用

Question

嗨，我是React和Material UI的新手。在这里，我尝试完成UI自动完成https://codesandbox.io/s/runh6（与芯片多选）。我在这里取得了成就，一切都很好。但文字动画没有唤醒。我想要像材质ui文本框标签这样的文本动画。

https://codesandbox.io/s/6e1dp。

我添加了标签：“国家/地区” ，但文本显示为静态。它没有显示任何动画。

最近两天我被打中了，谁能帮我解决这个问题。

Answer 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>
              );
            }

希望这会有所帮助。