Добавьте значок перед элементом ввода в response-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.info(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>
);
@robinsax ответ обновляется кодом.
Я не уверен, чего вы пытаетесь достичь, но, возможно, вам нужно использовать стиль :before для этого?
но я искал что-то, в чем я мог бы использовать свои готовые классы case, такие как классы font awesome или что-то в этом роде.
Вместо этого вы можете добавить новый div со значком слева, заполнитель будет скрыт, когда у вас будет значение.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Основываясь на том, что вы уже сделали, я бы сделал комбинацию нестандартного стиля + нестандартный компонент.
export default class InfluencersForm extends Component {
constructor() {
super();
this.handleInfluencerName = this.handleInfluencerName.bind(this);
}
handleInfluencerName(event) {
console.info(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.
Вот живой пример моего решения.
Живой пример не работает. Если я выберу «abc», «abc» перекрывается с увеличительным стеклом.
@Melissa живой пример был не в актуальном состоянии, теперь он
Вам необходимо предоставить код