单击材料-ui 自动完成空白页在反应 js 中打开

【问题标题】：On clicking material-ui autocomplete blank page is opening in react js单击材料-ui 自动完成空白页在反应 js 中打开
【发布时间】：2020-09-07 18:39:18
【问题描述】：

当我点击从 material-ui 导入的自动完成组件时，它显示空白页。

const defaultProps = {
     options: catalogs,
     getOptionLabel: (option) => option.catalogsLink,
   };
<Autocomplete
        {...defaultProps}
        id="debug"
        debug
        renderInput={(params) => <TextField {...params} label="catalog link" margin="normal" />}
      />

【问题讨论】：

标签： javascript reactjs autocomplete material-ui dropdown

【解决方案1】：

它在单击时显示空白页面，因为您没有在自动完成组件中传递选项道具。 options 属性接受你想要显示的所有选项的数组。

例如

const countries = [
 { code: 'AD', label: 'Andorra', phone: '376' },
 { code: 'AE', label: 'United Arab Emirates', phone: '971' },
 { code: 'AF', label: 'Afghanistan', phone: '93' },
 { code: 'AG', label: 'Antigua and Barbuda', phone: '1-268' },
 { code: 'AI', label: 'Anguilla', phone: '1-264' },
 { code: 'AL', label: 'Albania', phone: '355' },
 { code: 'AM', label: 'Armenia', phone: '374' },
];

现在将这个国家/地区数组传递给 options 属性

options={countries}

代码访问codesandbox.io/material-ui-demo

【讨论】：