bee-form-control

用 <FormControl>
来代替 <input>
, <textarea>
, and <select>
安装步骤
$ git clone https://github.com/tinper-bee/bee-form-control
$ cd bee-form-control
$ npm install
$ npm run dev
使用
使用单独的bee-form-control包
组件引入
先进行下载bee-form-control包
npm install --save bee-form-control
组件调用
import FormControl from 'bee-form-control';
React.render(<div>
<div>
<FormControl placeholder="input placeholder" ref="test" />
</div>
</div>, document.getElementById('target'));
样式引入
- 可以使用link引入dist目录下bee-form-control.css
<link rel="stylesheet" href="./node_modules/build/bee-form-control.css">
import "./node_modules/src/FormControl.scss"
import "./node_modules/build/bee-form-control.css"
API
参数 | 说明 | 类型 | 默认值 |
---|
className | 类名 | string | - |
componentClass | 说明表单类型(input ,textarea ) | string | 'input' |
type | 类型(text ,search , submit ,'checkbox',...详情http://www.w3school.com.cn/html5/att_input_type.asp) | string | 'text' |
onChange | input值发生改变触发的回调 | func | - |
onKeyDown | keydown回调 | func | - |
value | input当前值 | string | - |
defaultValue | input默认值 | string | - |
onSearch | input type="search" 回车和点击搜索按钮的回调 | func | - |
showClose | 是否显示清空按钮 | bool | - |
focusSelect | 设置当focus的时候是否选择内容 | bool | false |