материал пользовательского интерфейса лаборатории автозаполнения его не работает

Question

@ material-ui / lab / Автозаполнение, это не работает для меня, просто не позволяйте мне выбирать и выбирать, и заполнитель всегда там, даже если тип,

здесь:

вот мой код:

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';

export default function FreeSolo() {
  return (
    <div style={{ width: 300 }}>
      <Autocomplete
        id="free-solo-demo"
        freeSolo
        options={top100Films.map(option => option.title)}
        renderInput={params => (
          <TextField {...params} label="freeSolo"   onInputValueChange={event: React.ChangeEvent<{}>, value: any} => void margin="normal" variant="outlined" fullWidth />
        )}
      />
    </div>
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
  { title: 'The Godfather: Part II', year: 1974 },
  { title: 'The Dark Knight', year: 2008 },
  { title: '12 Angry Men', year: 1957 }
];

это тот же код в документации, но он не работает.

может быть что-то может быть с версией, вот часть моего пакета. json

{
  "name": "....",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.5.0",
    "@material-ui/icons": "^4.4.3",
    "@material-ui/lab": "^4.0.0-alpha.39",
    "axios": "^0.19.0",
    "date-and-time": "^0.10.0",
    "downshift": "^4.0.4",
    "firebase": "^7.2.2",
    "notistack": "^0.9.7",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-hooks": "^1.0.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0"
  },

}

Answer 1

Вы допустили как минимум две ошибки.

1. Вы должны использовать самое последнее для @material-ui/lab, поэтому в упаковке должно быть "@material-ui/lab": "latest",. json

2. Вы не должны использовать карту, чтобы получать только названия фильмов в опциях

3. onInputValueChange не существует в вашем коде, и в API MaterialUI нет таких реквизитов , Кроме того, вы возвращаете void из этой функции, которая не определена.

Я создал коды и коробку с нужным вам функциональным компонентом, и вы можете найти его здесь: https://codesandbox.io/s/material-demo-vexgl