Ant-Design组件api合集（Data_Entry）

閱讀時間：全文 1197 字，預估用時 6 分鐘

創作日期：2017-11-21

文章標籤：

下篇文章：Ant-Design组件api合集(General、Layout、Navigation)

BEGIN

AutoComplete自动完成

参数	说明	类型	默认值
dataSource	自动完成的数据源	DataSourceItemType[]	-
value	指定当前选中的条目	stringإstring[]ﺇ{ key: string, label: stringﺇReactNode }ﺇArray<{ key: string, label: stringﺇReactNode }>	-
defaultValue	指定默认选中的条目	stringﺇstring[]ﺇ{ key: string, label: stringﺇReactNode }ﺇArray<{ key: string, label: stringﺇReactNode}>	-
allowClear	支持清除, 单选模式有效	boolean	false
onChange	选中 option，或 input 的 value 变化时，调用此函数	function(value)	-
onSelect	被选中时调用，参数为选中项的 value 值	function(value, option)	-
disabled	是否禁用	boolean	false
defaultActiveFirstOption	是否默认高亮第一个选项。	boolean	true
placeholder	输入框提示	string	-
children (自动完成的数据源)	自动完成的数据源	React.ReactElement / Array<React.ReactElement>	-
children (自定义输入框)	自定义输入框	HTMLInputElement / HTMLTextAreaElement / React.ReactElement
optionLabelProp	回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 value。	string	children
filterOption	是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。	boolean or function(inputValue, option)	true

自定义内容时用AutoComplete.Option包裹

使用:

<AutoComplete
  style={{ width: 200 }}
  onChange={this.handleChange}
  placeholder="input here"
>
  <AutoComplete.Option key={email}>{email}</AutoComplete.Option>
</AutoComplete>

Cascader级联选择

使用:

const options = [{
  value: 'zhejiang',
  label: 'Zhejiang',
  children: [{
    value: 'hangzhou',
    label: 'Hangzhou',
    children: [{
      value: 'xihu',
      label: 'West Lake',
    }],
  }],
}, {
  value: 'jiangsu',
  label: 'Jiangsu',
  children: [{
    value: 'nanjing',
    label: 'Nanjing',
    children: [{
      value: 'zhonghuamen',
      label: 'Zhong Hua Men',
    }],
  }],
}];
function displayRender(label) {
  return label[label.length - 1];
}
<Cascader options={options} expandTrigger="hover" displayRender={displayRender} onChange={onChange} />

参数	说明	类型	默认值
options	可选项数据源	object	-
defaultValue	默认的选中项	CascaderOptionType[]	[]
value	指定选中项	CascaderOptionType[]	-
onChange	选择完成后的回调	(value, selectedOptions) => void	-
displayRender	选择后展示的渲染函数	(label, selectedOptions) => ReactNode	label => label.join(’ / ‘)
style	自定义样式	string	-
className	自定义类名	string	-
popupClassName	自定义浮层类名	string	-
popupPlacement	浮层预设位置：bottomLeft bottomRight topLeft topRight	Enum	bottomLeft
placeholder	输入框占位文本	string	’请选择’
size	输入框大小，可选 large default small	string	default
disabled	禁用	boolean	false
allowClear	是否支持清除	boolean	true
expandTrigger	次级菜单的展开方式，可选 ‘click’ 和 ‘hover’	string	’click’
changeOnSelect	当此项为 true 时，点选每级菜单选项值都会发生变化	boolean	false
showSearch	在选择框中显示搜索框	boolean	false
notFoundContent	当下拉列表为空时显示的内容	string	’Not Found’
loadData	用于动态加载选项，无法与 showSearch 一起使用	(selectedOptions) => void	-
getPopupContainer	菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。示例	Function(triggerNode)	() => document.body

showSearch 为对象时，其中的字段：

参数	说明	类型	默认值
filter	接收 inputValue path 两个参数，当 path 符合筛选条件时，应返回 true，反之则返回 false。	function(inputValue, path): boolean	-
render	用于渲染 filter 后的选项	function(inputValue, path): ReactNode	-
sort	用于排序 filter 后的选项	function(a, b, inputValue)	-
matchInputWidth	搜索结果列表是否与输入框同宽	boolean	-

Checkbox多选框

使用:

<Checkbox onChange={onChange}>Checkbox</Checkbox>
const plainOptions = ['Apple', 'Pear', 'Orange'];
<Checkbox.Group options={plainOptions} defaultValue={['Apple']} onChange={onChange} />

Checkbox

参数	说明	类型	默认值
checked	指定当前是否选中	boolean	false
defaultChecked	初始是否选中	boolean	false
onChange	变化时回调函数	Function(e:Event)	-
indeterminate	设置 indeterminate 状态，只负责样式控制	boolean	false

Checkbox.Group

参数	说明	类型	默认值
defaultValue	默认选中的选项	string[]	[]
value	指定选中的选项	string[]	[]
options	指定可选项	string[]	[]
onChange	变化时回调函数	Function(checkedValue)	-

DatePicker日期选择框

使用:

  <RangePicker
  	showTime={{ format: 'HH:mm' }}
  	format="YYYY-MM-DD HH:mm"
  	placeholder={['Start Time', 'End Time']}
  	onChange={onChange}
  	onOk={onOk}
  />

取MonthPicker和RangePicker: const { MonthPicker, RangePicker } = DatePicker;

DatePicker、MonthPicker、RangePicker 共享的 API

参数	说明	类型	默认值
allowClear	是否显示清除按钮	boolean	true
disabled	禁用	boolean	false
style	自定义输入框样式	object	{}
popupStyle	格外的弹出日历样式	object	{}
size	输入框大小，large 高度为 32px，small 为 22px，默认是 28px	string	-
locale	国际化配置	object	默认配置
disabledDate	不可选择的日期	function	-
getCalendarContainer	定义浮层的容器，默认为 body 上新建 div	function(trigger)	-
open	控制弹层是否展开	boolean	-
onOpenChange	弹出日历和关闭日历的回调	function(status)	-
placeholder	输入框提示文字	stringﺇRangePicker[]	-

DatePicker

参数	说明	类型	默认值
value	日期	moment	-
defaultValue	默认日期	moment	-
format	展示的日期格式，配置参考 moment.js	string	”YYYY-MM-DD”
onChange	时间发生变化的回调	function(date: moment, dateString: string)	-
showTime	增加时间选择功能	Objectﺇboolean	TimePicker Options
showToday	是否展示“今天”按钮	boolean	true
disabledTime	不可选择的时间	function(date)	-
onOk	点击确定按钮的回调	function()	-

MonthPicker

参数	说明	类型	默认值
value	日期	moment	-
defaultValue	默认日期	moment	-
format	展示的日期格式，配置参考 moment.js	string	”YYYY-MM”
onChange	时间发生变化的回调，发生在用户选择时间时	function(date: moment, dateString: string)	-
monthCellContentRender	自定义的月份内容渲染方法	function(date, locale): ReactNode	-

RangePicker

参数	说明	类型	默认值
value	日期	moment[]	-
defaultValue	默认日期	moment[]	-
format	展示的日期格式	string	”YYYY-MM-DD HH:mm:ss”
onChange	时间发生变化的回调，发生在用户选择时间时	function(dates: [moment, moment], dateStrings: [string, string])	-
showTime	增加时间选择功能	Objectإboolean	TimePicker Options
disabledTime	不可选择的时间	function(dates: [moment, moment], partial: ‘start’ﺇ’end’)	-
ranges	预设事件范围快捷选择	{ [range: string]: moment[] }	-
onOk	点击确定按钮的回调	function()	-

FINISH

上篇文章：NodeJS代码的debug

下篇文章：Ant-Design组件api合集(General、Layout、Navigation)