- 首页
- 前端开发
- 在 react-select 中的 input 元素前添加一个图标
在 react-select 中的 input 元素前添加一个图标
[英] Add an icon before the input element in react-select
本文介绍了在 react-select 中的 input 元素前添加一个图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在 react select 的输入元素前面添加一个图标.我能够在占位符中获取图标，但占位符的问题是当我从下拉列表中选择一些数据时，占位符图标会被删除.我需要一些帮助才能获得 Select 语句前面的图标.
这是我到目前为止所实现的代码
import React, { Component } from 'react'import Select, { components } from 'react-select'导出默认类 InfluencersForm 扩展组件 {构造函数(){极好的();this.handleInfluencerName = this.handleInfluencerName.bind(this);}处理影响者名称(事件){控制台日志(事件)}使成为() {const 影响者 = [{ 值:'abc'，标签:'abc' }，{ 值:'def'，标签:'def'}]const DropdownIndicator = (props) =>{返回组件.DropdownIndicator &&(<components.DropdownIndicator {...props}><i className="fa fa-search" aria-hidden="true" style={{ position: 'initial' }}></i></components.DropdownIndicator>);};返回 (<div><div><选择选项={影响者}isMulti={false}onChange={this.handleInfluencerName}isSearchable={真}组件={{ DropdownIndicator }}占位符={占位符组件}classNamePrefix="vyrill"/>
)}}const placeholderComponent = (<div><i className="fa fa-search" aria-hidden="true" style={{ position: 'initial' }}></i>我是占位符
);
解决方案
基于您已经完成的工作，我将进行自定义样式 + 自定义组件的组合.
export default class InfluencersForm extends Component {构造函数(){极好的();this.handleInfluencerName = this.handleInfluencerName.bind(this);}handleInfluencerName(事件){控制台日志(事件)；}使成为() {const 影响者 = [{ 值:abc"，标签:abc"}，{ 值:def"，标签:def"}];const ValueContainer = ({ children, ...props }) =>{返回 (components.ValueContainer &&(<components.ValueContainer {...props}>{!!儿童&&(<我className="fa fa-search"咏叹调隐藏=真"style={{ position: 'absolute', left: 6 }}/>)}{孩子们}</components.ValueContainer>));};const DropdownIndicator = 道具 =>{返回 (components.DropdownIndicator &&(<components.DropdownIndicator {...props}><我className="fa fa-search"咏叹调隐藏=真"/></components.DropdownIndicator>));};常量样式 = {价值容器:基地=>({...根据，填充左:24})}返回 (<div><div><选择选项={影响者}isMulti={false}onChange={this.handleInfluencerName}isSearchable={true}组件={{ DropdownIndicator, ValueContainer }}classNamePrefix="vyrill"样式={样式}/>
);}}
在我的自定义样式中，我添加了 24 的任意 paddingLeft 以腾出一些空间并添加所需的图标.您可能需要根据要使用的图标进行更改.
然后在 children 旁边的 ValueContainer 中，我放置了 fontAwesome 图标.
这是我的解决方案的现场示例.
I am trying to add an icon in front of the input element of react select. I am able to get the icon in placeholder but the problem with a placeholder is that when I select some data from the dropdown the placeholder icon gets removed. I need some help to get the icon in front of the Select statement.
Here's the code of what I have achieved till now
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>
);
解决方案
Based on what you've already done I would do a combination of custom style + custom component.
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>
);
}
}
In my custom style I have added an arbitrary paddingLeft of 24 to make some space and add the desired icon. You might have to change it depending of the icon you want to use.
Then in ValueContainer next to the children I have put the fontAwesome icon.
Here a live example of my solution.
这篇关于在 react-select 中的 input 元素前添加一个图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
