Как сохранить состояние автозаполнения пользовательского интерфейса при повторном рендеринге компонента? - PullRequest
Новая
       5

Как сохранить состояние автозаполнения пользовательского интерфейса при повторном рендеринге компонента?

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

Я использую компонент Material-UI v4 AutoComplete с renderOption prop для рендеринга опции элемента checkbox, однако проблема заключается в том, что при возникновении события onChange обновляется hook в родительском компоненте и приводит к отрисовке дочернего объекта и, таким образом, состояние компонента и состояние выбранных элементов теряются, что приводит к несогласованности в пользовательском интерфейсе и логике c, как я могу предотвратить такой сценарий при рендеринге! 

export default function CheckboxesTags() {
  return (
    <Autocomplete
      multiple
      id="checkboxes-tags-demo"
      options={top100Films}
      disableCloseOnSelect
      getOptionLabel={option => option.title}
      onChange={(e, values)=> {
          setMoveisFilter(values); // it calls the setter of the hook at the parent component

      }}
      renderOption={(option, { selected }) => (
        <React.Fragment>
          <Checkbox
            icon={icon}
            checkedIcon={checkedIcon}
            style={{ marginRight: 8 }}
            checked={selected}
          />
          {option.title}
        </React.Fragment>
      )}
      style={{ width: 500 }}
      renderInput={params => (
        <TextField
          {...params}
          label="Checkboxes"
          placeholder="Favorites"
          fullWidth
        />
      )}
    />

1 Ответ

0 голосов
/ 06 марта 2020

https://material-ui.com/api/autocomplete/ getOptionSelected prop - это то, что вы ищете, например, getOptionSelected = (option, values) => option._id === values._id

...