在react-select中的input元素前添加图标

Question

我试图在反应选择的输入元素前面添加一个图标。我可以在占位符中获取图标，但占位符的问题是，当我从下拉列表中选择一些数据时，占位符图标会被删除。我需要一些帮助来获取 Select 语句前面的图标。

这是我到目前为止所实现的代码

import React, { Component } from 'react'
import Select, { components } from 'react-select'

export default class InfluencersForm extends Component {

    constructor(){
        super();
        this.handleInfluencerName = this.handleInfluencerName.bind(this);
    }
    handleInfluencerName(event){
        console.log(event)
    }
    render() {
        const influencers = [
            { value: 'abc', label: 'abc' },
            { value: 'def', label: 'def' }
        ]

        const DropdownIndicator = (props) => {
            return components.DropdownIndicator && (
                <components.DropdownIndicator {...props}>
                    <i className="fa fa-search" aria-hidden="true" style={{ position: 'initial' }}></i>
                </components.DropdownIndicator>
            );
        };
        return (
            <div>
                <div>
                    <Select
                        options={influencers}
                        isMulti={false}
                        onChange={this.handleInfluencerName}
                        isSearchable={true}
                        components={{ DropdownIndicator }}
                        placeholder={placeholderComponent}
                        classNamePrefix="vyrill"/>
                </div>
            </div>
        )
    }
}

const placeholderComponent = (
    <div>
        <i className="fa fa-search" aria-hidden="true" style={{ position: 'initial' }}></i>
        I am placeholder
    </div>
);

Answer 1

根据您已经完成的工作，我将结合使用自定义样式+自定义组件。

export default class InfluencersForm extends Component {
  constructor() {
    super();
    this.handleInfluencerName = this.handleInfluencerName.bind(this);
  }
  handleInfluencerName(event) {
    console.log(event);
  }
  render() {
    const influencers = [
      { value: "abc", label: "abc" },
      { value: "def", label: "def" }
    ];

    const ValueContainer = ({ children, ...props }) => {
      return (
        components.ValueContainer && (
          <components.ValueContainer {...props}>
            {!!children && (
              <i
                className="fa fa-search"
                aria-hidden="true"
                style={{ position: 'absolute', left: 6 }}
              />
            )}
            {children}
          </components.ValueContainer>
        )
      );
    };

    const DropdownIndicator = props => {
      return (
        components.DropdownIndicator && (
          <components.DropdownIndicator {...props}>
            <i
              className="fa fa-search"
              aria-hidden="true"
            />
          </components.DropdownIndicator>
        )
      );
    };

    const styles = {
      valueContainer: base => ({
        ...base,
        paddingLeft: 24
      })
    }

    return (
      <div>
        <div>
          <Select
            options={influencers}
            isMulti={false}
            onChange={this.handleInfluencerName}
            isSearchable={true}
            components={{ DropdownIndicator, ValueContainer }}
            classNamePrefix="vyrill"
            styles={styles}
          />
        </div>
      </div>
    );
  }
}

在我的自定义样式中，我添加了任意

paddingLeft

或

24

来腾出一些空间并添加所需的图标。您可能需要根据您要使用的图标进行更改。

然后在

ValueContainer

旁边的

children

中我放置了 fontAwesome 图标。

这是我的解决方案的现场示例。

Answer 2

我在左侧的输入框内添加了一个图标，如下所示：

import ReactSelect, { components as RSComponents } from 'react-select'

...

const components = {
  Control: (vcProps: ControlProps<SelectOption>) => {
    const { children } = vcProps
    return (
      <RSComponents.Control {...vcProps}>
        {icon} // <<< Icon is your variable with JSX code
        {children}
      </RSComponents.Control>
    )
  }
}