5

React-Select を使用しています。

現在、elasticsearch からデータをフェッチし、次の状態に設定しています。

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

このコンポーネントにより多くの情報をどのように渡しますか?

4

1 に答える 1

6

コードを正しく見ていると、optionRenderer prop を optionComponent と一緒に渡すことができるように見えます。

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

オプションを引数として取るため、オプションオブジェクトに追加のフィールドを渡し、optionRenderer 関数を介してレンダリングできます。たぶん、このようなもの...

// ...
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} />
}
于 2016-07-14T21:30:12.437 に答える