Отключить удаление параметров Backspace в автозаполнении

Question

Я хочу использовать компонент автозаполнения (из библиотеки Material-Ui) из пользовательского интерфейса материала для выбора нескольких параметров, и эти параметры не должны быть удалены (напрямую) пользователем.

Проблема, с которой я сталкиваюсь, заключается в том, что пользователь может удалить параметры из автозаполнения, если они фокусируют компонент и нажимают клавишу возврата, как будто они удаляют текст.

Код

Это компонент I ' m, используя:

<Autocomplete multiple
    options={options}
    getOptionLabel={option => option.title}
    renderInput={params =>
        <TextField {...params} label="Autocomplete" variant="outlined" />
    }
    onChange={this.onAutocompleteChange.bind(this)}
    getOptionSelected={(option: Option, value: Option) => option.value === value.value}
    filterSelectedOptions={true}
    renderTags={(tagValue, getTagProps) =>
        tagValue.map((option, index) => (
            <Chip key={option.value} label={option.title} color="primary" />
        ))
    }
    disableClearable={true}
/>

То, что я пробовал

• Отключение TextField в опоре renderInput с помощью disable={true} не имеет никакого эффекта.
• Добавление InputProps={{ disabled: true }} или InputProps={{ readOnly: true }} в TextField полностью отключает автозаполнение.
• Добавление ChipProps={{ disabled: true }} к автозаполнению не имеет никакого эффекта.

Спасибо за чтение!

Answer 1

Чтобы управлять этим аспектом, вам необходимо использовать управляемый подход к значению автозаполнения, как показано в этой демонстрации .

В документации для опоры onChange вы найдете следующее:

onChange    Callback fired when the value changes.

Signature:

function(event: object, value: T | T[], reason: string) => void

   event: The event source of the callback.
   value: The new value of the component.
   reason: One of "create-option", "select-option", "remove-option", "blur" or "clear".

Третий аргумент onChange - это «причина» изменения. В вашем случае вы хотите игнорировать все изменения "remove-option":

        onChange={(event, newValue, reason) => {
          if (reason !== "remove-option") {
            setValue(newValue);
          }
        }}

Вот полный рабочий пример:

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

const options = ["Option 1", "Option 2"];

export default function ControllableStates() {
  const [value, setValue] = React.useState([options[0]]);
  const [inputValue, setInputValue] = React.useState("");

  return (
    <div>
      <div>{`value: ${value !== null ? `'${value}'` : "null"}`}</div>
      <div>{`inputValue: '${inputValue}'`}</div>
      <br />
      <Autocomplete
        multiple
        value={value}
        disableClearable
        onChange={(event, newValue, reason) => {
          if (reason !== "remove-option") {
            setValue(newValue);
          }
        }}
        inputValue={inputValue}
        onInputChange={(event, newInputValue) => {
          setInputValue(newInputValue);
        }}
        id="controllable-states-demo"
        options={options}
        style={{ width: 300 }}
        renderInput={params => (
          <TextField {...params} label="Controllable" variant="outlined" />
        )}
        renderTags={(tagValue, getTagProps) =>
          tagValue.map((option, index) => (
            <Chip key={option} label={option} color="primary" />
          ))
        }
      />
    </div>
  );
}

Редактировать Автозаполнение игнорировать изменения опции удаления