Использование optionRenderer с Select.Aysn c (реагировать на выбор) - PullRequest
Новая
       6

Использование optionRenderer с Select.Aysn c (реагировать на выбор)

3 голосов
/ 11 марта 2020

Я не могу найти в документации, как использовать optionRenderer prop сact-select asyn c (Select.Asyn c)

вот вопрос на который уже ответили, но renderOptions вообще не вызывается

вот мой фрагмент моего кода: 

renderOption = (option) => {
    return (
        <div>
            // for example:
            {option.label}: {option.value}
        </div>
    )
}


<Select.Async
    placeholder={placeholder}
    loadOptions={(inputValue) => this.asyncLoadOptions(inputValue)}
    isClearable
    onChange={(value, e) => {
      this.onDropDownFilterChange(value, e)
    }}
    onMenuScrollToBottom={this.fetchDropDownNextPage}
    defaultOptions={defaultOptions}
    defaultValue={defaultValue}
    styles={this.props.hasError ? customStyles : undefined}
    optionRenderer={this.renderOption}

/>

Здесь я хочу сохранить функциональность и стили для каждый элемент dropDown как есть (например, onMouseOver и т. д.) Я просто хочу отформатировать, как элементы отображаются в списке, так что это правильный способ сделать это? или нет другого выбора, кроме использования components prop.

Мне удалось добиться правильного форматирования с помощью components prop, но я потерял стили и все события мыши.

1 Ответ

0 голосов
/ 12 марта 2020

так что для тех, кто ищет ответ, это то, чем я в конечном итоге воспользовался, и он выполняет свою работу: (несвязанный код был удален для краткости фрагмента) 

import AsyncSelect  from 'react-select/async';
import { components } from 'react-select';

const Option = props => {
    return (
        <components.Option {...props} >
            {props.data.label}<br/>
            <small style={{color: 'gray'}}>
                {props.data.manufacturerName || 'Unknown'} | {props.data.assetGroupDescription || 'Unknown'}
            </small>
        </components.Option>
    )};

class FilterDropDownMenu extends Component {

render() {
    return (
        <>
            <label htmlFor={id}>{translate(placeholder)}</label>
            <AsyncSelect
                {...this.props}
                isClearable
                onChange={(value, e) => {
                    this.onDropDownFilterChange(value, e)
                }}
                onMenuScrollToBottom={this.fetchDropDownNextPage}
                defaultOptions={defaultOptions}
                defaultValue={defaultValue}
                styles={hasError ? customStyles : undefined}
                components={{ Option }}
            />
        </>
    )
   }
}

Таким образом, Я получаю желаемое форматирование, и я не теряю встроенную функциональность response-select (события мыши, стили и т. Д.).

...