在自动完成中禁用退格删除选项答案

【问题标题】：Disable backspace deleting of options in Autocomplete在自动完成中禁用退格删除选项
【发布时间】：2020-11-24 20:15:55
【问题描述】：

我想使用 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 }} 添加到自动完成没有任何效果。

感谢阅读！

【问题讨论】：

标签： javascript reactjs autocomplete material-ui

【解决方案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>
  );
}

【讨论】：