Question

我正在使用React-Select。

目前我从elasticsearch获取数据并将其设置为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})

稍后我使用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({
    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>
        );
    }
});

您如何将更多信息传递到此组件中？

Answer 1

如果我正确查看代码，看起来你可以传入一个optionRenderer prop和你的optionComponent。

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

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

localhost

ReactSelect：传入自定义渲染使用的额外数据

1 个答案: