Select

一个基本的 Select 示例 #

你可以使用 <Select /> 标签快速生成一个下拉选项框.你需要提供一个对象数组作为下拉选项的数据源,对象数组中每个对象序号包含 value 和 label 值.

Select 的不同状态 #

可以多选的 Select #

在 <Select /> 标签中添加 multi 属性可以使 Select 多选.

异步加载 Options 的 Select #

如果需要异步加载 options ,需要使用 asyncOptions 函数来代替 Array 填充数组.

asyncOptions 函数含有两个参数 String input, Function callback .当输入框的文本内容改变时 Function callback 会被回调.

Props #

名称	类型	缺省值	描述
addLabelText	string	'Add "{label}"?'	配合 allowCreate 使用的显示文本
allowCreate	bool	false	在可多选的 Select 下,允许新建一个选项(当输入一个不在 options数组中的字段的时候,下方会显示 addLabelText 属性的内容以提示添加这个 item)
asyncOptions	func	undefined	获取下拉选项填充数组的回调函数,用于异步加载
autoload	bool	true	是否让异步加载的 options 自动加载
backspaceRemoves	bool	true	是否允许使用键盘上 backspace 按键来删除已经选中的项
cacheAsyncResults	bool	true	enables the options cache for asyncOptions (default: true)
clearable	bool	true	should it be possible to reset value
clearAllText	string	'Clear all'	title for the "clear" control when multi is true
clearValueText	string	'Clear value'	title for the "clear" control
delimiter	string	','	delimiter to use to join multiple values
disabled	bool	false	当为 true 的时候 组件不可用
filterOption	func	undefined	method to filter a single option: function(option, filterString)
filterOptions	func	undefined	method to filter the options array: function([options], filterString, [values])
ignoreCase	bool	true	whether to perform case-insensitive filtering
inputProps	object	{}	custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
isLoading	bool	false	当为 true 时,显示一个 loading 的加载圈(比如在异步加载 options 时)
labelKey	string	'label'	the option property to use for the label
matchPos	string	'any'	(any, start) match the start or entire string when filtering
matchProp	string	'any'	(any, label, value) which option property to filter on
multi	bool	undefined	下拉选项可以多选
name	string	undefined	field name, for hidden <input /> tag
newOptionCreator	func	undefined	factory to create new options when allowCreate is true
noResultsText	string	'No results found'	placeholder displayed when there are no matching search results
onBlur	func	undefined	onBlur handler: function(event) {}
onChange	func	undefined	onChange handler: function(newValue) {}
onFocus	func	undefined	onFocus handler: function(event) {}
onInputChange	func	undefined	onInputChange handler: function(inputValue) {}
onOptionLabelClick	func	undefined	onClick handler for value labels: function (value, event) {}
optionRenderer	func	undefined	function which returns a custom way to render the options in the menu
options	array	undefined	下拉选项的填充数组
placeholder	string	'Select ...'	当下拉框没有内容时默认显示的文本
searchable	bool	true	Select 的搜索功能是否可用
searchingText	string	'Searching...'	message to display whilst options are loading via asyncOptions, or when isLoading is true
searchPromptText	string	'Type to search'	label to prompt for search input
value	any	undefined	初始化 select 的默认选中值,对应 options 选项的 value
valueKey	string	'value'	the option property to use for the value
valueRenderer	func	undefined	function which returns a custom way to render the value selected

组件参考 #

React-Select v0.9.1版本: https://github.com/JedWatson/react-select