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

IT技术 javascript reactjs react-select
2021-05-13 23:56:16

我正在尝试在 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>
);
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 图标。

这是我的解决方案的一个活生生的例子。

其它你可能感兴趣的问题
上一篇使用本机 Web 组件时，Typescript 错误“类型 'JSX.IntrinsicElements' 上不存在属性” 下一篇从react组件调用节点module