如何在 react-select 组件上添加图标和工具提示？

Question

我正在尝试在 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>;    }}

Answer 1

您需要添加组件，如下所示，仅出于演示目的添加一个选项，您可以按照自己的方式设置样式。

即使您可以使用可重用的组件来生成标签，因为标签接受一个节点。

我希望这能解决问题。

{

    value: "page_visited",

    label: (

      <>

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

        <FontAwesomeIcon icon="info" title={"Page Visited Option"} />

      </>

    )

  },

整个代码

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);

Answer 2

我认为您可以通过使用图标值制作自己的组件和对象来尝试这种方式。

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

Answer 3

我认为您可以从此https://codesandbox.io/s/8ln4vnr1v2?from-embed获得参考