Question

我正在尝试在react select的输入元素前面添加一个图标。我可以在占位符中获取图标，但是占位符的问题是，当我从下拉列表中选择一些数据时，占位符图标将被删除。我需要一些帮助才能将图标显示在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图标。

这是我的解决方案的live example。

在react-select中的输入元素之前添加图标

1 个答案: