[英]Disable backspace deleting of options in Autocomplete
I want to use an Autocomplete (from the Material-Ui library) component from material ui to select multiple options, and those options should not be able to be removed (directly) by the user.我想使用从材料 ui 到 select 多个选项的自动完成(来自 Material-Ui 库)组件,并且这些选项不应该被用户(直接)删除。
The problem I'm facing is that the user can delete the options from the Autocomplete if they focus the component and press backspace as if they are deleting text.我面临的问题是,如果用户关注组件并按下退格键,就好像他们正在删除文本一样,用户可以从自动完成中删除选项。
This is the component I'm using:这是我正在使用的组件:
<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}
has no effect.使用disable={true}
从 renderInput 属性禁用 TextField 无效。InputProps={{ disabled: true }}
or InputProps={{ readOnly: true }}
to TextField disables the Autocomplete completely.将InputProps={{ disabled: true }}
或InputProps={{ readOnly: true }}
添加到 TextField 会完全禁用自动完成功能。ChipProps={{ disabled: true }}
to the Autocomplete has no effect.将ChipProps={{ disabled: true }}
添加到自动完成没有任何效果。Thanks for reading!谢谢阅读!
To control this aspect, you need to use a controlled approach to the Autocomplete's value as demonstrated in this demo .要控制这方面,您需要对 Autocomplete 的值使用受控方法,如本演示中所示。
In the documentation for the onChange
prop you will find the following:在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".
The third argument to onChange
is the "reason" for the change. onChange
的第三个参数是更改的“原因”。 In your case, you want to ignore all of the "remove-option" changes:在您的情况下,您想忽略所有“删除选项”更改:
onChange={(event, newValue, reason) => {
if (reason !== "remove-option") {
setValue(newValue);
}
}}
Here's a full working example:这是一个完整的工作示例:
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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.