автозаполнение при реагирующей очистке выдает ошибку - PullRequest
Новая
       5

автозаполнение при реагирующей очистке выдает ошибку

0 голосов
/ 09 января 2020

У меня есть форма, созданная с помощью material-ui, у меня есть текстовое поле, использующее автозаполнение, которое заполнено useEffect, который отвечает за получение данных из API для загрузки AUTOCOMPLETE.

данные не сохраняются.

Код 

  const defaultProps={
    options:location.name,
    getOptionLabel: option =>  option.label + "-" + option.phone,
  };


  <Autocomplete
        style={{ width: 300 }}
        {...defaultProps}
        id="city"
        autoComplete                   
        onChange={(event, newVal)=>onChange({target:{name:"name",value: newVal.label }}
          )}
        renderInput={params => (
          <TextField {...params}   label="Country"  margin="normal" variant="outlined" inputProps={{
            ...params.inputProps,
          }}/>
        )}

Что вызывает такое поведение?

1 Ответ

1 голос
/ 09 января 2020

Появится ваша проблема в следующей строке:

onChange={(event, newVal)=>onTagsChange({target:{name:"label",value: newVal.label }}

Это может быть связано с тем, что newValue составляет null после очистки. Вы можете добавить такую ​​защиту, как:

value: newVal || newVal.label

Поскольку мне не ясно, как вы используете итоговый выбор, моя предложенная защита может не подходить.

Вы также можете взглянуть на их «контролируемый» пример в документации (https://material-ui.com/components/autocomplete/#playground), в которой они используют атрибут value для управления AutoComplete: 

<Autocomplete
 {...defaultProps}
 id="controlled-demo"
 value={value}
 onChange={(event, newValue) => {
  setValue(newValue);
 }}
 renderInput={params => (
  <TextField {...params} label="controlled" margin="normal" fullWidth />
 )}
/>
...