在自动完成中禁用退格键删除选项
Disable backspace deleting of options in Autocomplete
我想使用一个自动完成组件(来自 Material-Ui 库)从 material ui 到 select 多个选项,那些用户不应(直接)删除选项。
我面临的问题是,如果用户聚焦组件并按退格键,就像他们正在删除文本一样,他们可以从自动完成中删除选项。
代码
这是我正在使用的组件:
<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 }}
到自动完成没有效果。
感谢阅读!
要控制这方面,您需要使用controlled approach to the Autocomplete's value as demonstrated in this demo。
在 documentation 的 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
的第三个参数是更改的“原因”。在您的情况下,您想忽略所有“remove-option”更改:
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>
);
}
我想使用一个自动完成组件(来自 Material-Ui 库)从 material ui 到 select 多个选项,那些用户不应(直接)删除选项。
我面临的问题是,如果用户聚焦组件并按退格键,就像他们正在删除文本一样,他们可以从自动完成中删除选项。
代码
这是我正在使用的组件:
<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 }}
到自动完成没有效果。
感谢阅读!
要控制这方面,您需要使用controlled approach to the Autocomplete's value as demonstrated in this demo。
在 documentation 的 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
的第三个参数是更改的“原因”。在您的情况下,您想忽略所有“remove-option”更改:
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>
);
}