reactjs - 如何将图标添加到 Material UI Select 选项?
问题描述
如何在Select
选项中添加图标?我尝试了很多次,但都没有工作:
<option value={0}>Item One</option>
<option value={1}>
<i class="fas fa-expand" />
Item two
</option>
完整示例代码:
class IconInSelect extends Component {
state = {
value: 0
};
handleChange = name => event => {
this.setState({ [name]: event.target.value });
};
render() {
const { value } = this.state;
const { classes } = this.props;
return (
<Select
autoWidth
native
value={value}
onChange={this.handleChange("value")}
name="value"
variant="filled"
classes={{
root: classes.selectEmpty,
select: classes.select
}}
>
<option value={0}>Item One</option>
<option value={1}>
<i class="fas fa-expand" />
Item two
</option>
<option value={2}>Item three</option>
</Select>
);
}
}
解决方案
使用菜单项。
class IconInSelect extends Component {
...
render() {
return (
<Select>
<MenuItem value="">
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
);
}
}
推荐阅读
- jquery - 重置段落的更改
- c++ - 从 .txt 文件中读取学生信息,然后计算平均值并找到字母等级
- python - Python DB2 SSL 连接
- python - python:正确的方法验证电子邮件是否存在
- r - R:数据框中日期列的最小值和最大值
- python - qtgui 的 Python 导入失败
- java - 获取 Java 扫描器输入而不使用高级扫描器
- amazon-s3 - 从 ec2 实例访问不同区域的 s3 存储桶
- java - 如何在android中为if else设置开关按钮
- angularjs - 如何在 Angular UI Modal 中使用 Datepicker