将 optionRenderer 与 Select.Aysnc 一起使用(反应选择) [英] Using optionRenderer with Select.Aysnc (react-select)

问题描述

我在文档中找不到如何将 optionRenderer prop 与 react-select async (Select.Async) 结合使用

这里有一个已经回答的问题，但根本没有调用 renderOptions

这是我的代码片段:

renderOption = (option) =>{返回 (<div>//例如:{option.label}:{option.value}

)}<选择.异步占位符={占位符}loadOptions={(inputValue) =>this.asyncLoadOptions(inputValue)}可清除onChange={(value, e) =>{this.onDropDownFilterChange(value, e)}}onMenuScrollToBottom={this.fetchDropDownNextPage}defaultOptions={defaultOptions}默认值={默认值}样式={this.props.hasError ?自定义样式:未定义}optionRenderer={this.renderOption}/>

在这里我想保持每个下拉项目的功能和样式(例如 onMouseOver 等)我只想格式化项目在列表中的显示方式，那么这是正确的方法吗?或者除了使用 components 道具之外别无选择.

我能够使用 components 道具实现正确的格式设置，但我丢失了样式和所有鼠标事件.

解决方案

所以对于那些正在寻找答案的人，这就是我最终使用的并且它完成了工作:(无关的代码已被删除以保留代码段简洁)

import AsyncSelect from 'react-select/async';从反应选择"导入{组件}；const 选项 = 道具 =>{返回 (<components.Option {...props} >{props.data.label}
<small style={{color: 'gray'}}>{props.data.manufacturerName ||'未知'} |{props.data.assetGroupDescription ||'未知'}</小></components.Option>)};类 FilterDropDownMenu 扩展组件 {使成为() {返回 (<><label htmlFor={id}>{translate(placeholder)}</label><异步选择{...this.props}可清除onChange={(value, e) =>{this.onDropDownFilterChange(value, e)}}onMenuScrollToBottom={this.fetchDropDownNextPage}defaultOptions={defaultOptions}默认值={默认值}样式={hasError ?自定义样式:未定义}组件={{选项}}/></>)}}

通过这种方式，我得到了我想要的格式，而且我不会失去 react-select 的内置功能(鼠标事件和样式等).

I can't find in the documentations how to use optionRenderer prop with react-select async (Select.Async)

here is a question that already been answered, but the renderOptions is not being called at all

here is my a snippet of my code:

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}

/>

Here I want to keep the functioality and styles for each dropDown item as is (e.g onMouseOver and so on) I just want to format how the items are shown in the list, so is this the right way to do it? or there no other option than using the components prop.

I was able to achieve the formatting right using the components prop, but I lost the styles, and all the mouse events.

解决方案

so for those who are looking for the answer, this is what I ended up using and it does the job: (unrelated code has been removed to keep the snippet concise)

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 }}
            />
        </>
    )
   }
}

This way, I get the formatting that I want, And I don't loose the built in functionality of react-select (mouse events and styling and so on).

这篇关于将 optionRenderer 与 Select.Aysnc 一起使用(反应选择)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！