如何解决Material-UI,对于自动完成组件,如何打包为父级可以调用的组件?
我尝试在以下位置重复使用所选国家/地区示例(打字稿)
国家选择示例 选择248个国家之一。
https://material-ui.com/components/autocomplete/
export default function CountrySelect(p: AutocompleteProps<CountryType,boolean,boolean>) {
const classes = useStyles();
return (
<Autocomplete
id="country-select-demo"
style={{ width: 300 }}
options={countries as CountryType[]}
classes={{
option: classes.option,}}
value = p.value
onChnage={p.onChange}
autoHighlight
getOptionLabel={(option) => option.label}
renderOption={(option) => (
<React.Fragment>
<span>{countryToFlag(option.code)}</span>
{option.label} ({option.code}) +{option.phone}
</React.Fragment>
)}
renderInput={(params) => (
<TextField
{...params}
label="Choose a country"
variant="outlined"
inputProps={{
...params.inputProps,autoComplete: 'new-password',// disable autocomplete and autofill
}}
/>
)}
/>
);
}
interface CountryType {
code: string;
label: string;
phone: string;
}
我不知道AutocompleteProps的含义,也不知道如何设置此类型:
AutocompleteProps<CountryType,boolean>
确保父组件可以设置值并具有onChange事件。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。