[英]Material-UI Autocomplete store only a single property of an object
我正在尝试使用自动完成功能,但我需要使值仅存储特定属性而不是完整对象。
例如,这种情况是属性Value
,但它可以是任何。
const options = [
{ Value: 1, label: "Option 1", anyOtherProp: 123 },
{ Value: 2, label: "Option 2", anyOtherProp: 456 },
{ Value: 3, label: "Option 3", anyOtherProp: 789 }
];
export default function App() {
const [value, setValue] = useState(null);
const valueKey = "Value"; // this should be any key
const handleChange = (e, value) => {
// what to do here?
setValue(value[valueKey]);
};
return (
<div className="App">
<Autocomplete
options={options}
onChange={handleChange}
value={value}
getOptionLabel={option => option.label}
renderInput={props => <TextField {...props} fullWidth />}
/>
</div>
);
}
当我这样做时,输入是空的,什么也不显示。
我需要该值只是对象的一个属性,而不是完整选项的对象。
这是一个显示问题的代码和框。
检查value
并调用setValue
。 还将CustomAutocomplete
上的value
道具替换为defaultValue
,一切都会正常工作。 检查小提琴小提琴链接
export default function App() {
const [value, setValue] = useState(null);
const valueKey = "Value"; // this should be any key
const handleChange = (e, value) => {
// what to do here?
if(value) setValue(value[valueKey]);
};
return (
<div className="App">
<CustomAutocomplete
onChange={handleChange}
defaultValue={value}
options={options}
/>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.