首頁猿問如何在 react-select...

如何在 react-select 組件上添加圖標和工具提示？

JavaScript

瀟瀟雨雨 2022-01-20 20:27:39

我正在嘗試在 react-select 組件選項上添加 fontawesome 圖標和工具提示。下圖我正在努力實現代碼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>; }}

查看完整描述

3 回答

臨摹微笑

TA貢獻1982條經驗獲得超2個贊

您需要添加組件，如下所示，僅出于演示目的添加一個選項，您可以按照自己的方式設置樣式。

即使您可以使用可重用的組件來生成標簽，因為標簽接受一個節點。

我希望這能解決問題。

{

value: "page_visited",

label: (

<span style={{ paddingRight: "5px" }}>Page Visited</span>

</>

)

整個代碼

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>

</>

)

{ value: "form_submitted", label: "Form Submitted" }

];

export default class Website extends Component {

constructor(props) {

super(props);

this.state = {

selectedFilter: ""

};

}

filterSelectedData = function(data) {};

render() {

return (

<b>Filters</b>

</h6>

<Select

value={this.state.selectedFilter}

onChange={e => this.filterSelectedData(e)}

options={websiteFilterFiedsOptions}

placeholder="Search and select website activity"

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<Website />, rootElement);

反對回復 2022-01-20

RISEBY

TA貢獻1856條經驗獲得超5個贊

我認為您可以通過使用圖標值制作自己的組件和對象來嘗試這種方式。

https://github.com/JedWatson/react-select/issues/3480

反對回復 2022-01-20

搖曳的薔薇

TA貢獻1793條經驗獲得超6個贊

我認為您可以從此https://codesandbox.io/s/8ln4vnr1v2?from-embed獲得參考

反對回復 2022-01-20

3 回答
0 關注
378 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在 react-select 組件上添加圖標和工具提示？

如何在 react-select 組件上添加圖標和工具提示？

3 回答

添加回答

如何在 react-select 組件上添加圖標和工具提示？

如何在 react-select 組件上添加圖標和工具提示？