本文介绍了物料自动完成功能不适用于InputProps的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图更改通过Autocomplete
渲染的TextField
的边框,但是当我添加InputProps
道具时,Autocomplete
不再渲染Chip
s
I am trying to change the border of my TextField
that is rendered through my Autocomplete
, but when I add the InputProps
prop, the Autocomplete
no longer renders Chip
s
<Autocomplete
multiple
freeSolo
options={options}
renderTags={(value, { className, onDelete }) =>
value.map((option, index) => (
<Chip
key={index}
variant="outlined"
data-tag-index={index}
tabIndex={-1}
label={option}
className={className}
color="secondary"
onDelete={onDelete}
/>
))
}
renderInput={(params) => (
<TextField
{...params}
id={id}
className={textFieldStyles.searchField}
label={label}
value={value}
onChange={onChange}
variant="outlined"
//InputProps={{
// classes: {
// input: textFieldStyles.input,
// notchedOutline: textFieldStyles.notchedOutline
// }
//}}
InputLabelProps={{
classes: {
root: textFieldStyles.label
}
}}
/>
)}
/>
上面的代码的作品,并且一旦我取消注释线,输入不再呈现当选择或输入的项目号第
The above code works, and once I uncomment the InputProps
line, the input no longer renders Chip
s when an item is selected or entered.
谢谢
推荐答案
之所以会发生这种情况,是因为InputProps属性覆盖了params的InputProps参数,您必须合并params的InputProps属性:
This happens because the InputProps attribute is overriding the InputProps parameter of params, you have to merge InputProps property of params:
InputProps={{
...params.InputProps,
classes: {
input: textFieldStyles.input,
notchedOutline: textFieldStyles.notchedOutline
}
}}
这篇关于物料自动完成功能不适用于InputProps的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!