[英]How to add icons and tooltip on react-select component?
I am trying add fontawesome icon and tooltip on react-select component options.我正在尝试在 react-select 组件选项上添加 fontawesome 图标和工具提示。 Below image i am trying to achieve下图我正在努力实现
Code代码
import React, { Component } from 'react';
import Select from 'react-select';
const websiteFilterFiedsOptions = [
{value: '', label: 'Search and select website activity'},
{value: 'page_visited', label: 'Page Visited'},
{value: 'form_submitted', label: 'Form Submitted'}
]
export default class Website extends Component {
constructor(props) {
super(props);
this.state = {
selectedFilter: ''
}
}
filterSelectedData = function(data) {
}
render() {
return <div className="form-group">
<h6 className="website_filter"><b>Filters</b></h6>
<div className="location-search field-width filed_width_custom">
<Select
value={this.state.selectedFilter}
onChange={(e) => this.filterSelectedData(e)}
options={ websiteFilterFiedsOptions }
placeholder="Search and select website activity"
/>
</div>
</div>;
}
}
You need to add the component as shown below, added it for only one option for demo purpose, you can style it in your way.您需要添加如下所示的组件,仅为演示目的添加一个选项,您可以按照自己的方式设置样式。
Even you can use a reusable component to generate label, since label accepts a node.即使您可以使用可重用组件来生成标签,因为标签接受一个节点。
I hope this will solve the issue.我希望这能解决这个问题。
{
value: "page_visited",
label: (
<>
<span style={{ paddingRight: "5px" }}>Page Visited</span>
<FontAwesomeIcon icon="info" title={"Page Visited Option"} />
</>
)
},
Entire Code完整代码
import React, { Component } from "react";
import ReactDOM from "react-dom";
import Select from "react-select";
import { library } from "@fortawesome/fontawesome-svg-core";
import { fab } from "@fortawesome/free-brands-svg-icons";
import { faInfo, faCoffee } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
library.add(fab, faInfo, faCoffee);
const websiteFilterFiedsOptions = [
{ value: "", label: "Search and select website activity" },
{
value: "page_visited",
label: (
<>
<span style={{ paddingRight: "5px" }}>Page Visited</span>
<FontAwesomeIcon icon="info" title={"Page Visited Option"} />
</>
)
},
{ value: "form_submitted", label: "Form Submitted" }
];
export default class Website extends Component {
constructor(props) {
super(props);
this.state = {
selectedFilter: ""
};
}
filterSelectedData = function(data) {};
render() {
return (
<div className="form-group">
<h6 className="website_filter">
<b>Filters</b>
</h6>
<div className="location-search field-width filed_width_custom">
<Select
value={this.state.selectedFilter}
onChange={e => this.filterSelectedData(e)}
options={websiteFilterFiedsOptions}
placeholder="Search and select website activity"
/>
</div>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Website />, rootElement);
I think you can try this way by making your own component and object with the icon values.我认为您可以通过使用图标值制作自己的组件和对象来尝试这种方式。
https://github.com/JedWatson/react-select/issues/3480 https://github.com/JedWatson/react-select/issues/3480
我想你可以从这个https://codesandbox.io/s/8ln4vnr1v2?from-embed得到参考
In my case also "placeholder" wouldn't work, so first I replace my select with select component of "antd" then try placeholder and it worked well.在我的例子中,“占位符”也不起作用,所以首先我将我的 select 替换为“antd”的 select 组件,然后尝试占位符,它运行良好。
import React, {useEffect, useState} from 'react';
import {Select} from "antd";
function DropdownFilter(props) {
const [data, setData] = useState([]);
useEffect(() => {
// console.log(props.data)
if (props.data !== undefined)
setData(props.data);
}, props.data);
return (
<Select
onChange={props.onChange}
placeholder={"Tooltip or Hint Text"}
>
{
data?.map((item) => {
return <option value={item.title}>{item.title}</option>
})
}
</Select>
)
};
export default DropdownFilter;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.