我正在以我的一种形式使用 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>
在每个 child 面前。但事实并非如此。我做错了什么?
最佳答案
使用 react-select V2,您可以通过访问 data
来实现此目的prop 传递给你传递给 components
的自定义组件你的 Prop <Select />
const Option = (props) => {
const {
...
data,
} = props
return (
<div ...>
{`${data.firstName} - ${data.lastName}`}
</div>
)
}
<Select
...
components={{ Option }}
...
/>
关于javascript - React Select 渲染自定义组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38382123/