ReactSelect:传入自定义渲染使用的额外数据 [英] ReactSelect: pass in extra data to be used by custom render

问题描述

我正在使用 React-Select.

目前我正在从 elasticsearch 中获取数据并将其设置为状态:

var new_titles = []body.hits.hits.forEach(function(obj){//遍历elasticsearchnew_titles.push({value: obj._source.title_id, label: obj._source.title_name})})this.setState({titleResults: new_titles})

稍后我使用 this.state.titleResults 并将其传递到我的 React-Select 组件中:

<Select autofocus optionComponent={DropdownOptions} options={this.state.titleResults} simpleValue clearable={this.state.clearable} name="selected-state" value={this.state.selectedTitleValue}onChange={this.handleTitleChosen} searchable={this.state.searchable}/>

这很好用.但是现在我想在用户搜索我的 React-Select componentOptions 时传递与此标题有关的额外元数据.像这样的东西:

我只传入{value: obj._source.title_id, label: obj._source.title_name}，但我想传入更多信息供我的使用DropdownOption 组件:

const DropdownOptions = React.createClass({道具类型:{孩子:React.PropTypes.node，类名:React.PropTypes.string，isDisabled: React.PropTypes.bool,isFocused: React.PropTypes.bool,isSelected: React.PropTypes.bool,onFocus: React.PropTypes.func,onSelect: React.PropTypes.func,选项:React.PropTypes.object.isRequired，},handleMouseDown(事件){event.preventDefault();event.stopPropagation();this.props.onSelect(this.props.option, event);},handleMouseEnter(事件){this.props.onFocus(this.props.option, event);},handleMouseMove(事件){如果(this.props.isFocused)返回；this.props.onFocus(this.props.option, event);},使成为 () {返回 (<div className={this.props.className}onMouseDown={this.handleMouseDown}onMouseEnter={this.handleMouseEnter}onMouseMove={this.handleMouseMove}标题={this.props.option.title}><span>测试文本</span>{this.props.children}

);}});

您将如何将更多信息传递到该组件中?

解决方案

好吧，如果我正确地查看了代码，您似乎可以将 optionRenderer 道具与 optionComponent 一起传递.

https://github.com/JedWatson/react-select/blob/master/src/Select.js#L874

它将您的选项作为参数，因此假设您可以在选项对象中传递其他字段并通过 optionRenderer 函数进行渲染.也许像这样......

//...选项渲染器(选项){返回 (<div>{option.value} - {option.label} - {option.someOtherValue}

)}//...使成为() {让选择道具 = {optionComponent:下拉选项，optionRenderer: this.optionRenderer,选项:this.state.titleResults，简单值:真，可清除:this.state.clearable，name: '选定状态',值:this.state.selectedTitleValue，onChange: this.handleTitleChosen,可搜索:this.state.searchable，自动对焦:真}return <Select {...selectProps}/>}

I am using React-Select.

Currently I am fetching data from elasticsearch and setting it to state:

var new_titles = []
body.hits.hits.forEach(function(obj){  // looping through elasticsearch
    new_titles.push({value: obj._source.title_id, label: obj._source.title_name})
})
this.setState({titleResults: new_titles})

Later I am using this.state.titleResults and passing it into my React-Select component:

<Select autofocus optionComponent={DropdownOptions} options={this.state.titleResults} simpleValue clearable={this.state.clearable} name="selected-state"  value={this.state.selectedTitleValue} onChange={this.handleTitleChosen} searchable={this.state.searchable} />

This works fine. But now I would like to pass in extra meta data pertaining to this title when users search my React-Select componentOptions. Something like this:

I am only passing in {value: obj._source.title_id, label: obj._source.title_name}, but I would like to pass in more information to be used by my DropdownOption component:

const DropdownOptions = React.createClass({
    propTypes: {
        children: React.PropTypes.node,
        className: React.PropTypes.string,
        isDisabled: React.PropTypes.bool,
        isFocused: React.PropTypes.bool,
        isSelected: React.PropTypes.bool,
        onFocus: React.PropTypes.func,
        onSelect: React.PropTypes.func,
        option: React.PropTypes.object.isRequired,
    },
    handleMouseDown (event) {
        event.preventDefault();
        event.stopPropagation();
        this.props.onSelect(this.props.option, event);
    },
    handleMouseEnter (event) {
        this.props.onFocus(this.props.option, event);
    },
    handleMouseMove (event) {
        if (this.props.isFocused) return;
        this.props.onFocus(this.props.option, event);
    },
    render () {
        return (
            <div className={this.props.className}
                onMouseDown={this.handleMouseDown}
                onMouseEnter={this.handleMouseEnter}
                onMouseMove={this.handleMouseMove}
                title={this.props.option.title}>
                <span>Testing Text</span>
                {this.props.children}
            </div>
        );
    }
});

How would you pass in more information into this component?

解决方案

Well if I am looking at the code correctly it looks like you can pass in an optionRenderer prop along with your optionComponent.

https://github.com/JedWatson/react-select/blob/master/src/Select.js#L874

It takes your option as an argument so hypothetically you can pass additional fields in your option object and render via the optionRenderer function. Maybe something like this...

// ...
optionRenderer(option) {
    return (
        <div>
            {option.value} - {option.label} - {option.someOtherValue}
        </div>
    )
}
// ...
render() {
    let selectProps = {
        optionComponent: DropdownOptions,
        optionRenderer: this.optionRenderer,
        options: this.state.titleResults,
        simpleValue: true,
        clearable: this.state.clearable,
        name: 'selected-state',
        value: this.state.selectedTitleValue,
        onChange: this.handleTitleChosen,
        searchable: this.state.searchable,
        autofocus: true
    }
    return <Select {...selectProps} />
}

这篇关于ReactSelect:传入自定义渲染使用的额外数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！