我在我的一种形式中使用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>
。但事实并非如此。我做错了什么?
答案 0 :(得分:2)
您写的属性为optionComponent
而不是optionsComponent
。
答案 1 :(得分:2)
使用反应选择V2 ,您可以通过访问传递到自定义组件的data
道具和传递给{{1 }}
components
答案 2 :(得分:0)
通过升级 react-select V2 及更高版本,您可以通过访问传递给自定义组件的prop
以及传递给组件 <Select />
的道具,因此您仍然可以保持选择组件的默认行为
此处https://react-select.com/styles#cx-and-custom-components
import React from 'react';
import { css } from 'emotion';
import Select from 'react-select';
import { colourOptions } from '../data';
const Option = (props: OptionProps) => {
const {
children,
className,
cx,
getStyles,
isDisabled,
isFocused,
isSelected,
innerRef,
innerProps,
} = props;
return (
<div
ref={innerRef}
className={cx(
css(getStyles('option', props)),
{
option: true,
'option--is-disabled': isDisabled,
'option--is-focused': isFocused,
'option--is-selected': isSelected,
},
className
)}
{...innerProps}
>
{children}
</div>
);
};
export default () => (
<Select
closeMenuOnSelect={false}
components={{ Option }}
styles={{
option: base => ({
...base,
border: `1px dotted ${colourOptions[2].color}`,
height: '100%',
}),
}}
defaultValue={colourOptions[4]}
options={colourOptions}
/>
);