Назначение значения по умолчанию для автозаполнения в MaterialUI и React. js

Question

Я хотел бы отобразить значение по умолчанию для моего компонента AutoFplete TextField из пользовательского интерфейса материала в React. js. Предварительно заполненное значение, которое автоматически загружается из профиля пользователя и может быть изменено другим из списка.

Вот мой код:

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

export const ComboBox =() => {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Combo box" defaultValue="The Godfather" variant="outlined" />}
    />
  );
}

// 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 } 
]

Я вижу только поле ввода с надписью на нем. defaultValue указан как API для TextField и Autocomplete, и я также попытался переместить его непосредственно под Autocomplete. Все еще не работает.

Answer 1

ваш defaultValue из <AutoComplete /> должен иметь тот же формат, что и ваш options, getOptionLable() используется для формирования этикетки даже из вашего defaultValue.

в вашем коде title свойство строки равно undefined, поэтому ничего не отображается.

это должно работать нормально:

<Autocomplete
    id="combo-box-demo"
    options={top100Films}
    defaultValue={{ title: "The Godfather", year: 1972 }}
    getOptionLabel={(option) => option.title}
    style={{ width: 300 }}
    renderInput={(params) => <TextField {...params} label="Combo box" defaultValue="The Godfather" variant="outlined" />}
/>

Answer 2

Вы можете использовать опцию defaultValue следующим образом:

<Autocomplete
    id="combo-box-demo"
    options={top100Films}
    defaultValue={ top100Films[0] }
    getOptionLabel={(option) => option.title}
    style={{ width: 300 }}
    renderInput={(params) => <TextField {...params} label="Combo box" defaultValue="The Godfather" variant="outlined" />}
/>