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

我试过的

• 从 renderInput 道具禁用 TextFielddisable={true}无效。
• 添加InputProps={{ disabled: true }}或InputProps={{ readOnly: true }}到 TextField 会完全禁用自动完成功能。
• 添加ChipProps={{ disabled: true }}到自动完成没有效果。

谢谢阅读！

标签： javascriptreactjsautocompletematerial-ui

Answer 1

要控制这方面，您需要对Autocomplete 的值使用受控方法，如本演示中所示。

在道具的文档中，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是改变的“原因”。在您的情况下，您想忽略所有“删除选项”更改：

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