禁用自动完成中的退格删除选项

Question

我想使用Material ui中的Autocomplete（来自Material-Ui库）组件来选择多个选项，并且用户不能（直接）删除这些选项。

我面临的问题是，如果用户将焦点放在组件上并可以像删除文本一样按Backspace键，则可以从“自动完成”中删除这些选项。

代码

这是我正在使用的组件：

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

我尝试过的

• 使用disable={true}从renderInput属性中禁用TextField无效。
• 将InputProps={{ disabled: true }}或InputProps={{ readOnly: true }}添加到TextField会完全禁用自动完成功能。
• 在自动完成中添加ChipProps={{ disabled: true }}无效。

感谢阅读！

Answer 1

要控制此方面，您需要使用controlled方法来处理“自动完成”的值，如this demo所示。

在onChange道具的documentation中，您将找到以下内容：

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的第三个参数是更改的“原因”。在您的情况下，您想忽略所有的“删除选项”更改：

        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>
  );
}