uxcore-select-form-field

uxcore-select-form-field component for uxcore.


Keywords
react, react-component, uxcore-select-form-field, SelectFormField
License
MIT
Install
npm install uxcore-select-form-field@0.4.11

Documentation


uxcore-select-form-field Dependency Status devDependency Status

TL;DR

uxcore-select-form-field ui component for react

setup develop environment

$ git clone https://github.com/uxcore/uxcore-select-form-field
$ cd uxcore-select-form-field
$ npm install
$ npm run start

Usage

demo

http://uxcore.coding.me/

API

Props

配置项 类型 必填 默认值 功能/备注
renderView func N undefined 自定义 VIEW 模式下的 value 渲染,回调时会回传当前已选中的项目,值全部是 [{ value, text }] 格式
loadingView string/jsx N undefined 自定义异步加载的 loading 视图,默认为 kuma-loading-s 样式,不建议自定义
valueStrictMode bool N false value 的数据类型是否严格匹配,在 0.4.16 版本之前 Option 的 value 始终会转成字符串,会导致表单值传入 Number 时无法匹配到 Option,打开这个属性之后不会做格式转换
searchKey string N q 接口搜索接收的参数 key,如果仅仅改 key 不需要实现 beforeFetch 了
fetchSizeOptions object N - 如果是通过搜索返回备选项,可以通过设置 fetchSizeOptions 在备选项最后加上一个提示选项,让用户输入关键词查询

备注:valueStrictMode 是为了保证业务向下兼容的无奈之举,实际上 value 类型本来就应该是匹配的,但是之前 rc-select 层是通过 key 这个特殊的 prop 来传递 Option 的 value 的,key 始终会被 React 转为字符串,导致 Number 类型的 value 匹配出问题。rc-select 在后续版本增加了 value 属性的传递解决了这个问题,但是为了避免业务中已经使用了 Form.field.value === '2'Option.value === 2 的时候匹配出现兼容问题,因此加了这样一个开关,因此建议新业务这个开关始终打开。

fetchSizeOptions 格式

{
  size: 10, // 如果需要开启提示特性,size 为必选。当接口返回的数据条数少于 size 时不会显示提示
  text: '默认仅展示 {count} 条数据,更多请输入关键字查询...', // 非必选,有默认文案
  style: {} // 需要覆盖提示 Option 样式时可传入
}