0
Я использую ReactSelect в одном из моих форм:ReactSelect рендеринга пользовательский компонент
<Select name='event-title' className="event-title" ref="stateSelect" autofocus optionsComponent={DropdownOptions} onInputChange={this.handleChangeTitle} options={this.state.titleResults} simpleValue clearable={this.state.clearable} name="selected-state" value={this.state.selectedTitleValue} onChange={this.handleTitleChosen} searchable={this.state.searchable} />
Я хотел бы, чтобы сделать пользовательский optionsComponent
:
optionsComponent={DropdownOptions}
Глядя на example, вы способный оказать индивидуальный компонент, поэтому я испытал это:
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>
);
}
});
Это должно быть рендеринг <span>Testing Text</span>
перед каждым ребенком. Но это не так. Что я делаю не так?
Моя конечная цель, чтобы мои параметры отображения различных данных, как это:
Спасибо, быстрый вопрос, который несколько уместен: какой лучший способ передать дополнительную информацию для каждой опциикомпонент. Например, у меня есть больше информации, чем просто «метка» и «значение». Я хотел бы отображать метаданные для каждого заголовка (согласно моему изображению) – ApathyBear
«optionComponent» передается опцией 'option', которая должна быть объектом данных. Ниже приведен пример src для отображаемой опции, https://github.com/JedWatson/react-select/blob/master/src/Select.js#L887 –