javascript - 在自动完成中禁用退格删除选项

Question

我想使用 Material ui 中的 Autocomplete(来自 Material-Ui 库)组件来选择多个选项，并且这些选项不应该被用户(直接)删除。
我面临的问题是，如果用户关注组件并按下退格键，就好像他们正在删除文本一样，用户可以从自动完成中删除选项。
代码
这是我正在使用的组件:

<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 中所示.
在 documentation对于onChange Prop 你会发现以下内容:

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