uxcore.js - React UI Component Set

组件演示

[{"title":"基本使用","id":"components-form-demo-basic","tags":[],"filepath":"site/components/form/demo/basic.md","directory":"components/form/demo","filename":"basic","meta":{"title":"基本使用","description":"\n无需任何绑定，只要插入几个标签，就可以完成一个表格的搭建。\n","order":"0","filepath":"site/components/form/demo/basic.md","filename":"basic","directory":"components/form/demo","id":"components-form-demo-basic","template":"demos","html":"<style type=\"text/css\">.demo-basic {\n max-width: 652px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.demo-basic {\n max-width: 652px;\n}</code></pre></div><script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Input = _uxcore.Form.InputFormField,\n Date = _uxcore.Form.DateFormField,\n TextArea = _uxcore.Form.TextAreaFormField,\n Other = _uxcore.Form.OtherFormField;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleSubmit',\n value: function handleSubmit() {\n console.log(this.form.getValues());\n }\n }, {\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n return React.createElement(\n 'div',\n { className: 'demo-basic' },\n React.createElement(\n _uxcore.Form,\n { ref: function ref(c) {\n _this2.form = c;\n }, className: 'demo-basic-form' },\n React.createElement(Input, { jsxname: 'theme', jsxlabel: '\\u4E3B\\u9898', jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u4E3B\\u9898' }),\n React.createElement(Input, { jsxname: 'location', jsxlabel: '\\u5730\\u70B9', jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u5730\\u70B9' }),\n React.createElement(Date, { jsxname: 'date', jsxlabel: '\\u65F6\\u95F4', jsxtype: 'cascade', autoMatchWidth: true }),\n React.createElement(TextArea, { jsxname: 'content', jsxlabel: '\\u5185\\u5BB9', inputBoxMaxWidth: 'large' }),\n React.createElement(\n Other,\n null,\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: '88px', marginTop: '16px' }, onClick: function onClick() {\n _this2.handleSubmit();\n } },\n '\\u786E\\u5B9A'\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Button } from 'uxcore';\nimport { Form } from 'uxcore';\n\nconst {\n InputFormField: Input,\n DateFormField: Date,\n TextAreaFormField: TextArea,\n OtherFormField: Other,\n} = Form;\n\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n handleSubmit() {\n console.log(this.form.getValues());\n }\n\n render() {\n return (\n <div className=\"demo-basic\">\n <Form ref={(c) => { this.form = c; }} className=\"demo-basic-form\">\n <Input jsxname=\"theme\" jsxlabel=\"主题\" jsxplaceholder=\"请输入主题\" />\n <Input jsxname=\"location\" jsxlabel=\"地点\" jsxplaceholder=\"请输入地点\" />\n <Date jsxname=\"date\" jsxlabel=\"时间\" jsxtype=\"cascade\" autoMatchWidth />\n <TextArea jsxname=\"content\" jsxlabel=\"内容\" inputBoxMaxWidth=\"large\" />\n <Other>\n <Button style={{ marginLeft: '88px', marginTop: '16px' }} onClick={() => { this.handleSubmit(); }}>确定</Button>\n </Other>\n </Form>\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-form-demo-basic'));</code></pre></div>"},"status":"public","toc":""},{"title":"布局","id":"components-form-demo-layout","tags":[],"filepath":"site/components/form/demo/layout.md","directory":"components/form/demo","filename":"layout","meta":{"title":"布局","description":"\n提供竖向和横向两种排列方式\n","order":"1","filepath":"site/components/form/demo/layout.md","filename":"layout","directory":"components/form/demo","id":"components-form-demo-layout","template":"demos","html":"<style type=\"text/css\">.demo-layout {\n max-width: 652px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.demo-layout {\n max-width: 652px;\n}</code></pre></div><script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Constants = _uxcore.Form.Constants,\n FormRowTitle = _uxcore.Form.FormRowTitle,\n Row = _uxcore.Form.FormRow,\n Input = _uxcore.Form.InputFormField,\n Select = _uxcore.Form.SelectFormField,\n Date = _uxcore.Form.DateFormField,\n TextArea = _uxcore.Form.TextAreaFormField,\n ButtonGroupFormField = _uxcore.Form.ButtonGroupFormField,\n Other = _uxcore.Form.OtherFormField;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n values: {\n layout: 'h'\n }\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleSubmit',\n value: function handleSubmit() {\n console.log(this.form.getValues());\n }\n }, {\n key: 'handleChange',\n value: function handleChange(values) {\n this.setState({\n values: values\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n var me = this;\n var isV = function isV() {\n return _this2.state.values.layout === 'v';\n };\n return React.createElement(\n 'div',\n { className: 'demo-layout' },\n React.createElement(\n _uxcore.Form,\n {\n ref: function ref(c) {\n _this2.form = c;\n },\n className: 'demo-basic-form',\n jsxvalues: this.state.values,\n jsxonChange: function jsxonChange(values) {\n _this2.handleChange(values);\n },\n verticalAlign: isV()\n },\n React.createElement(Select, {\n jsxname: 'layout',\n jsxlabel: '\\u5E03\\u5C40',\n jsxdata: [{ value: 'h', text: '横向' }, { value: 'v', text: '竖向' }]\n }),\n React.createElement(Input, { jsxname: 'location', jsxlabel: '\\u5730\\u70B9', jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u5730\\u70B9' }),\n React.createElement(Date, { jsxname: 'date', jsxlabel: '\\u65F6\\u95F4', jsxtype: 'cascade', autoMatchWidth: true }),\n React.createElement(TextArea, { jsxname: 'content', jsxlabel: '\\u5185\\u5BB9' }),\n React.createElement(\n Other,\n null,\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: isV() ? '0px' : '88px', marginTop: '16px' }, onClick: me.handleSubmit.bind(me) },\n '\\u786E\\u5B9A'\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-layout'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Button } from 'uxcore';\nimport { Form } from 'uxcore';\nconst {\n Constants,\n FormRowTitle,\n FormRow: Row,\n InputFormField: Input,\n SelectFormField: Select,\n DateFormField: Date,\n TextAreaFormField: TextArea,\n ButtonGroupFormField,\n OtherFormField: Other,\n} = Form;\n\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n values: {\n layout: 'h',\n },\n };\n }\n\n handleSubmit() {\n console.log(this.form.getValues());\n }\n\n handleChange(values) {\n this.setState({\n values,\n });\n }\n\n render() {\n const me = this;\n const isV = () => this.state.values.layout === 'v';\n return (\n <div className=\"demo-layout\">\n <Form\n ref={(c) => { this.form = c; }}\n className=\"demo-basic-form\"\n jsxvalues={this.state.values}\n jsxonChange={(values) => { this.handleChange(values); }}\n verticalAlign={isV()}\n >\n <Select\n jsxname=\"layout\"\n jsxlabel=\"布局\"\n jsxdata={[\n { value: 'h', text: '横向' },\n { value: 'v', text: '竖向' },\n ]}\n />\n <Input jsxname=\"location\" jsxlabel=\"地点\" jsxplaceholder=\"请输入地点\" />\n <Date jsxname=\"date\" jsxlabel=\"时间\" jsxtype=\"cascade\" autoMatchWidth />\n <TextArea jsxname=\"content\" jsxlabel=\"内容\" />\n <Other>\n <Button style={{ marginLeft: isV() ? '0px' : '88px', marginTop: '16px' }} onClick={me.handleSubmit.bind(me)}>确定</Button>\n </Other>\n </Form>\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-form-demo-layout'));</code></pre></div>"},"status":"public","toc":""},{"title":"尺寸","id":"components-form-demo-size","tags":[],"filepath":"site/components/form/demo/size.md","directory":"components/form/demo","filename":"size","meta":{"title":"尺寸","description":"\n提供 large/middle/small 三种尺寸\n","order":"1","filepath":"site/components/form/demo/size.md","filename":"size","directory":"components/form/demo","id":"components-form-demo-size","template":"demos","html":"<style type=\"text/css\">.demo-size {\n max-width: 652px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.demo-size {\n max-width: 652px;\n}</code></pre></div><script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Constants = _uxcore.Form.Constants,\n FormRowTitle = _uxcore.Form.FormRowTitle,\n Row = _uxcore.Form.FormRow,\n Input = _uxcore.Form.InputFormField,\n Select = _uxcore.Form.SelectFormField,\n Date = _uxcore.Form.DateFormField,\n TextArea = _uxcore.Form.TextAreaFormField,\n ButtonGroupFormField = _uxcore.Form.ButtonGroupFormField,\n Other = _uxcore.Form.OtherFormField;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n values: {\n size: 'large'\n }\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleSubmit',\n value: function handleSubmit() {\n console.log(this.form.getValues());\n }\n }, {\n key: 'handleChange',\n value: function handleChange(values) {\n this.setState({\n values: values\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n var me = this;\n return React.createElement(\n 'div',\n { className: 'demo-size' },\n React.createElement(\n _uxcore.Form,\n {\n ref: function ref(c) {\n _this2.form = c;\n },\n className: 'demo-basic-form',\n jsxvalues: this.state.values,\n jsxonChange: function jsxonChange(values) {\n _this2.handleChange(values);\n },\n size: this.state.values.size\n },\n React.createElement(Select, {\n jsxname: 'size',\n jsxlabel: '\\u5C3A\\u5BF8',\n jsxdata: [{ value: 'large', text: '大' }, { value: 'middle', text: '中' }, { value: 'small', text: '小' }]\n }),\n React.createElement(Input, { jsxname: 'location', jsxlabel: '\\u5730\\u70B9', jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u5730\\u70B9' }),\n React.createElement(Date, { jsxname: 'date', jsxlabel: '\\u65F6\\u95F4', jsxtype: 'cascade', autoMatchWidth: true }),\n React.createElement(TextArea, { jsxname: 'content', jsxlabel: '\\u5185\\u5BB9' }),\n React.createElement(\n Other,\n null,\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: '88px', marginTop: this.state.values.size === 'small' ? '12px' : '16px' }, onClick: me.handleSubmit.bind(me) },\n '\\u786E\\u5B9A'\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-size'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Button } from 'uxcore';\nimport { Form } from 'uxcore';\nconst {\n Constants,\n FormRowTitle,\n FormRow: Row,\n InputFormField: Input,\n SelectFormField: Select,\n DateFormField: Date,\n TextAreaFormField: TextArea,\n ButtonGroupFormField,\n OtherFormField: Other,\n} = Form;\n\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n values: {\n size: 'large',\n },\n };\n }\n\n handleSubmit() {\n console.log(this.form.getValues());\n }\n\n handleChange(values) {\n this.setState({\n values,\n });\n }\n\n render() {\n const me = this;\n return (\n <div className=\"demo-size\">\n <Form\n ref={(c) => { this.form = c; }}\n className=\"demo-basic-form\"\n jsxvalues={this.state.values}\n jsxonChange={(values) => { this.handleChange(values); }}\n size={this.state.values.size}\n >\n <Select\n jsxname=\"size\"\n jsxlabel=\"尺寸\"\n jsxdata={[\n { value: 'large', text: '大' },\n { value: 'middle', text: '中' },\n { value: 'small', text: '小' },\n ]}\n />\n <Input jsxname=\"location\" jsxlabel=\"地点\" jsxplaceholder=\"请输入地点\" />\n <Date jsxname=\"date\" jsxlabel=\"时间\" jsxtype=\"cascade\" autoMatchWidth />\n <TextArea jsxname=\"content\" jsxlabel=\"内容\" />\n <Other>\n <Button style={{ marginLeft: '88px', marginTop: this.state.values.size === 'small' ? '12px' : '16px' }} onClick={me.handleSubmit.bind(me)}>确定</Button>\n </Other>\n </Form>\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-form-demo-size'));</code></pre></div>"},"status":"public","toc":""},{"title":"校验和提示","id":"components-form-demo-validator","tags":[],"filepath":"site/components/form/demo/validator.md","directory":"components/form/demo","filename":"validator","meta":{"title":"校验和提示","description":"\n自带验证函数，并且支持自己手写，并分为实时验证与非实时验证。\n","order":"1","filepath":"site/components/form/demo/validator.md","filename":"validator","directory":"components/form/demo","id":"components-form-demo-validator","template":"demos","html":"<style type=\"text/css\">.demo-validator {\n max-width: 652px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.demo-validator {\n max-width: 652px;\n}</code></pre></div><script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Input = _uxcore.Form.InputFormField,\n Date = _uxcore.Form.DateFormField,\n TextArea = _uxcore.Form.TextAreaFormField,\n OtherFormField = _uxcore.Form.OtherFormField,\n SelectFormField = _uxcore.Form.SelectFormField,\n Validators = _uxcore.Form.Validators;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n mode: true\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleSubmit',\n value: function handleSubmit() {\n console.log(this.form.getValues(true));\n }\n }, {\n key: 'handleModeChange',\n value: function handleModeChange(values, name) {\n console.log(values[name]);\n this.setState({\n mode: values[name] === 'true'\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n var me = this;\n return React.createElement(\n 'div',\n { className: 'demo-validator' },\n React.createElement(\n _uxcore.Form,\n { className: 'form-select', jsxvalues: { mode: 'true' }, jsxonChange: me.handleModeChange.bind(me) },\n React.createElement(SelectFormField, { jsxdata: { true: '实时校验', false: '非实时校验' }, jsxname: 'mode', jsxlabel: '\\u6821\\u9A8C\\u6A21\\u5F0F', showSearch: false })\n ),\n React.createElement(\n _uxcore.Form,\n { ref: function ref(c) {\n _this2.form = c;\n }, className: 'demo-basic-form', instantValidate: me.state.mode },\n React.createElement(Input, {\n jsxname: 'theme',\n jsxlabel: '\\u4E3B\\u9898',\n required: true,\n jsxtips: '\\u8FD9\\u662F\\u4E00\\u4E2A\\u63D0\\u793A',\n jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u4E3B\\u9898',\n jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }, {\n validator: function validator(value) {\n return value.length <= 3;\n },\n errMsg: '不能超过3个字' }]\n }),\n React.createElement(Input, {\n jsxname: 'location',\n jsxlabel: '\\u5730\\u70B9',\n required: true,\n jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u5730\\u70B9',\n jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]\n }),\n React.createElement(Date, { jsxname: 'date', jsxlabel: '\\u65F6\\u95F4', jsxtype: 'cascade', autoMatchWidth: true }),\n React.createElement(TextArea, {\n jsxname: 'content',\n jsxlabel: '\\u5185\\u5BB9',\n required: true,\n jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]\n }),\n React.createElement(\n OtherFormField,\n null,\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: '88px', marginTop: '16px' }, onClick: me.handleSubmit.bind(me) },\n '\\u786E\\u5B9A'\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-validator'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Button } from 'uxcore';\nimport { Form } from 'uxcore';\nimport { Icon } from 'uxcore';\nimport { Tooltip } from 'uxcore';\n\nconst {\n InputFormField: Input,\n DateFormField: Date,\n TextAreaFormField: TextArea,\n OtherFormField,\n SelectFormField,\n Validators,\n} = Form;\n\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n mode: true,\n };\n }\n\n handleSubmit() {\n console.log(this.form.getValues(true));\n }\n\n handleModeChange(values, name) {\n console.log(values[name]);\n this.setState({\n mode: values[name] === 'true',\n });\n }\n\n render() {\n const me = this;\n return (\n <div className=\"demo-validator\">\n <Form className=\"form-select\" jsxvalues={{ mode: 'true' }} jsxonChange={me.handleModeChange.bind(me)}>\n <SelectFormField jsxdata={{ true: '实时校验', false: '非实时校验' }} jsxname=\"mode\" jsxlabel=\"校验模式\" showSearch={false} />\n </Form>\n <Form ref={(c) => { this.form = c; }} className=\"demo-basic-form\" instantValidate={me.state.mode}>\n <Input\n jsxname=\"theme\"\n jsxlabel=\"主题\"\n required\n jsxtips=\"这是一个提示\"\n jsxplaceholder=\"请输入主题\"\n jsxrules={[\n { validator: Validators.isNotEmpty, errMsg: '不能为空' },\n { validator(value) { return value.length <= 3; }, errMsg: '不能超过3个字' },\n ]}\n />\n <Input\n jsxname=\"location\"\n jsxlabel=\"地点\"\n required\n jsxplaceholder=\"请输入地点\"\n jsxrules={[\n { validator: Validators.isNotEmpty, errMsg: '不能为空' },\n ]}\n />\n <Date jsxname=\"date\" jsxlabel=\"时间\" jsxtype=\"cascade\" autoMatchWidth />\n <TextArea\n jsxname=\"content\"\n jsxlabel=\"内容\"\n required\n jsxrules={[\n { validator: Validators.isNotEmpty, errMsg: '不能为空' },\n ]}\n />\n <OtherFormField>\n <Button style={{ marginLeft: '88px', marginTop: '16px' }} onClick={me.handleSubmit.bind(me)}>确定</Button>\n </OtherFormField>\n </Form>\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-form-demo-validator'));</code></pre></div>"},"status":"public","toc":""},{"title":"横向排列","id":"components-form-demo-horizon","tags":[],"filepath":"site/components/form/demo/horizon.md","directory":"components/form/demo","filename":"horizon","meta":{"title":"横向排列","description":"\n无需任何设置，自动实现横排，并可以根据系数进行弹性布局。\n","order":"2","filepath":"site/components/form/demo/horizon.md","filename":"horizon","directory":"components/form/demo","id":"components-form-demo-horizon","template":"demos","html":"<style type=\"text/css\">.demo-horizon {\n max-width: 652px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.demo-horizon {\n max-width: 652px;\n}</code></pre></div><script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Constants = _uxcore.Form.Constants,\n FormRowTitle = _uxcore.Form.FormRowTitle,\n Row = _uxcore.Form.FormRow,\n Input = _uxcore.Form.InputFormField,\n Date = _uxcore.Form.DateFormField,\n TextArea = _uxcore.Form.TextAreaFormField,\n OtherFormField = _uxcore.Form.OtherFormField,\n Validators = _uxcore.Form.Validators;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleSubmit',\n value: function handleSubmit() {\n console.log(this.refs.form.getValues());\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n return React.createElement(\n 'div',\n { className: 'demo-horizon' },\n React.createElement('style', null),\n React.createElement(\n _uxcore.Form,\n { ref: 'form', className: 'demo-horizon-form' },\n React.createElement(\n Row,\n null,\n React.createElement(Input, { jsxname: 'theme', jsxlabel: '\\u4E3B\\u9898', required: true, jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u4E3B\\u9898', jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }, {\n validator: function validator(value) {\n return value.length < 3;\n },\n errMsg: '不能超过3个字' }]\n }),\n React.createElement(Input, { jsxname: 'location', jsxlabel: '\\u5730\\u70B9', required: true, jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u5730\\u70B9', jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]\n })\n ),\n React.createElement(TextArea, { jsxname: 'content', jsxlabel: '\\u5185\\u5BB9', required: true, jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]\n }),\n React.createElement(\n OtherFormField,\n null,\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: '88px', marginTop: '16px' }, onClick: me.handleSubmit.bind(me) },\n '\\u786E\\u5B9A'\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-horizon'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Button } from 'uxcore';\nimport { Form } from 'uxcore';\nconst {\n Constants,\n FormRowTitle,\n FormRow: Row,\n InputFormField: Input,\n DateFormField: Date,\n TextAreaFormField: TextArea,\n OtherFormField,\n Validators,\n} = Form;\n\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n handleSubmit() {\n console.log(this.refs.form.getValues());\n }\n\n render() {\n const me = this;\n return (\n <div className=\"demo-horizon\">\n <style />\n <Form ref=\"form\" className=\"demo-horizon-form\">\n <Row>\n <Input jsxname=\"theme\" jsxlabel=\"主题\" required jsxplaceholder=\"请输入主题\" jsxrules={[\n { validator: Validators.isNotEmpty, errMsg: '不能为空' },\n { validator(value) { return value.length < 3; }, errMsg: '不能超过3个字' },\n ]}\n />\n <Input jsxname=\"location\" jsxlabel=\"地点\" required jsxplaceholder=\"请输入地点\" jsxrules={[\n { validator: Validators.isNotEmpty, errMsg: '不能为空' },\n ]}\n />\n </Row>\n <TextArea jsxname=\"content\" jsxlabel=\"内容\" required jsxrules={[\n { validator: Validators.isNotEmpty, errMsg: '不能为空' },\n ]}\n />\n <OtherFormField>\n <Button style={{ marginLeft: '88px', marginTop: '16px' }} onClick={me.handleSubmit.bind(me)}>确定</Button>\n </OtherFormField>\n </Form>\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-form-demo-horizon'));</code></pre></div>"},"status":"public","toc":""},{"title":"输入区域最大宽度","id":"components-form-demo-max-width","tags":[],"filepath":"site/components/form/demo/max-width.md","directory":"components/form/demo","filename":"max-width","meta":{"title":"输入区域最大宽度","description":"\n为了应对一些宽屏情况下自适应过长的问题，我们提供了两套最大宽度限制。\n","order":"3","filepath":"site/components/form/demo/max-width.md","filename":"max-width","directory":"components/form/demo","id":"components-form-demo-max-width","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Input = _uxcore.Form.InputFormField,\n TextArea = _uxcore.Form.TextAreaFormField,\n Other = _uxcore.Form.OtherFormField;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleSubmit',\n value: function handleSubmit() {\n console.log(this.form.getValues());\n }\n }, {\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n return React.createElement(\n 'div',\n { className: 'demo-max-width' },\n React.createElement(\n _uxcore.Form,\n { ref: function ref(c) {\n _this2.form = c;\n }, className: 'demo-basic-form' },\n React.createElement(Input, { jsxname: 'theme', jsxlabel: '\\u4E3B\\u9898', jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u4E3B\\u9898', inputBoxMaxWidth: 'middle' }),\n React.createElement(Input, { jsxname: 'location', jsxlabel: '\\u5730\\u70B9', jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u5730\\u70B9', inputBoxMaxWidth: 'middle' }),\n React.createElement(TextArea, { jsxname: 'content', jsxlabel: '\\u5185\\u5BB9', inputBoxMaxWidth: 'large' }),\n React.createElement(\n Other,\n null,\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: '88px', marginTop: '16px' }, onClick: function onClick() {\n _this2.handleSubmit();\n } },\n '\\u786E\\u5B9A'\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-max-width'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Button } from 'uxcore';\nimport { Form } from 'uxcore';\n\nconst {\n InputFormField: Input,\n TextAreaFormField: TextArea,\n OtherFormField: Other,\n} = Form;\n\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n handleSubmit() {\n console.log(this.form.getValues());\n }\n\n render() {\n return (\n <div className=\"demo-max-width\">\n <Form ref={(c) => { this.form = c; }} className=\"demo-basic-form\">\n <Input jsxname=\"theme\" jsxlabel=\"主题\" jsxplaceholder=\"请输入主题\" inputBoxMaxWidth=\"middle\" />\n <Input jsxname=\"location\" jsxlabel=\"地点\" jsxplaceholder=\"请输入地点\" inputBoxMaxWidth=\"middle\" />\n <TextArea jsxname=\"content\" jsxlabel=\"内容\" inputBoxMaxWidth=\"large\" />\n <Other>\n <Button style={{ marginLeft: '88px', marginTop: '16px' }} onClick={() => { this.handleSubmit(); }}>确定</Button>\n </Other>\n </Form>\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-form-demo-max-width'));</code></pre></div>"},"status":"public","toc":""},{"title":"编辑查看模式","id":"components-form-demo-mode","tags":[],"filepath":"site/components/form/demo/mode.md","directory":"components/form/demo","filename":"mode","meta":{"title":"编辑查看模式","description":"\nForm 支持编辑和查看两种模式，并且支持随时切换，从此两个页面变成一个页面。\n","order":"3","filepath":"site/components/form/demo/mode.md","filename":"mode","directory":"components/form/demo","id":"components-form-demo-mode","template":"demos","html":"<style type=\"text/css\">.demo-mode {\n max-width: 652px;\n}\n.demo-mode .other {\n padding-top: 16px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.demo-mode {\n max-width: 652px;\n}\n.demo-mode .other {\n padding-top: 16px;\n}</code></pre></div><script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Constants = _uxcore.Form.Constants,\n FormRowTitle = _uxcore.Form.FormRowTitle,\n Row = _uxcore.Form.FormRow,\n Input = _uxcore.Form.InputFormField,\n Date = _uxcore.Form.DateFormField,\n TextArea = _uxcore.Form.TextAreaFormField,\n OtherFormField = _uxcore.Form.OtherFormField,\n SelectFormField = _uxcore.Form.SelectFormField,\n Validators = _uxcore.Form.Validators;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n mode: Constants.MODE.EDIT\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleSubmit',\n value: function handleSubmit() {\n console.log(this.form.getValues());\n }\n }, {\n key: 'handleChangeMode',\n value: function handleChangeMode() {\n this.setState({\n mode: this.state.mode === Constants.MODE.EDIT ? Constants.MODE.VIEW : Constants.MODE.EDIT\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n var me = this;\n return React.createElement(\n 'div',\n { className: 'demo-mode' },\n React.createElement(\n _uxcore.Form,\n {\n ref: function ref(c) {\n _this2.form = c;\n },\n className: 'demo-basic-form',\n jsxvalues: {\n theme: 'Form 展示',\n location: 'Uxcore 站点',\n date: ['2015-10-15', '2015-11-15'],\n content: '这是一个 Form 的模式转换页面。'\n },\n jsxmode: me.state.mode\n },\n React.createElement(Input, { jsxname: 'theme', jsxlabel: '\\u4E3B\\u9898', required: true, jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u4E3B\\u9898' }),\n React.createElement(Input, {\n jsxname: 'location',\n jsxlabel: '\\u5730\\u70B9',\n required: true,\n jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u5730\\u70B9',\n jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]\n }),\n React.createElement(Date, { jsxname: 'date', jsxlabel: '\\u65F6\\u95F4', jsxtype: 'cascade', autoMatchWidth: true }),\n React.createElement(TextArea, {\n jsxname: 'content',\n jsxlabel: '\\u5185\\u5BB9',\n required: true,\n jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]\n }),\n React.createElement(\n OtherFormField,\n { className: 'other' },\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: '88px', marginRight: '8px' }, onClick: me.handleSubmit.bind(me) },\n '\\u786E\\u5B9A'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginRight: '8px' }, type: 'secondary', onClick: me.handleChangeMode.bind(me) },\n '\\u8F6C\\u6362\\u6A21\\u5F0F'\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-mode'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Button } from 'uxcore';\nimport { Form } from 'uxcore';\nconst {\n Constants,\n FormRowTitle,\n FormRow: Row,\n InputFormField: Input,\n DateFormField: Date,\n TextAreaFormField: TextArea,\n OtherFormField,\n SelectFormField,\n Validators,\n} = Form;\n\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n mode: Constants.MODE.EDIT,\n };\n }\n\n handleSubmit() {\n console.log(this.form.getValues());\n }\n\n handleChangeMode() {\n this.setState({\n mode: this.state.mode === Constants.MODE.EDIT ? Constants.MODE.VIEW : Constants.MODE.EDIT,\n });\n }\n\n render() {\n const me = this;\n return (\n <div className=\"demo-mode\">\n <Form\n ref={(c) => { this.form = c; }}\n className=\"demo-basic-form\"\n jsxvalues={{\n theme: 'Form 展示',\n location: 'Uxcore 站点',\n date: ['2015-10-15', '2015-11-15'],\n content: '这是一个 Form 的模式转换页面。',\n }}\n jsxmode={me.state.mode}\n >\n <Input jsxname=\"theme\" jsxlabel=\"主题\" required jsxplaceholder=\"请输入主题\" />\n <Input\n jsxname=\"location\"\n jsxlabel=\"地点\"\n required\n jsxplaceholder=\"请输入地点\"\n jsxrules={[\n { validator: Validators.isNotEmpty, errMsg: '不能为空' },\n ]}\n />\n <Date jsxname=\"date\" jsxlabel=\"时间\" jsxtype=\"cascade\" autoMatchWidth />\n <TextArea\n jsxname=\"content\"\n jsxlabel=\"内容\"\n required\n jsxrules={[\n { validator: Validators.isNotEmpty, errMsg: '不能为空' },\n ]}\n />\n <OtherFormField className=\"other\">\n <Button style={{ marginLeft: '88px', marginRight: '8px' }} onClick={me.handleSubmit.bind(me)}>确定</Button>\n <Button style={{ marginRight: '8px' }} type=\"secondary\" onClick={me.handleChangeMode.bind(me)}>转换模式</Button>\n </OtherFormField>\n </Form>\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-form-demo-mode'));</code></pre></div>"},"status":"public","toc":""},{"title":"搜索框","id":"components-form-demo-search","tags":[],"filepath":"site/components/form/demo/search.md","directory":"components/form/demo","filename":"search","meta":{"title":"搜索框","description":"\n提供复杂和精简的两种搜索模式。\n","order":"4","filepath":"site/components/form/demo/search.md","filename":"search","directory":"components/form/demo","id":"components-form-demo-search","template":"demos","html":"<style type=\"text/css\">.demo-search {\n max-width: 652px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.demo-search {\n max-width: 652px;\n}</code></pre></div><script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _objectAssign = require('object-assign');\n\nvar _objectAssign2 = _interopRequireDefault(_objectAssign);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n;\n\nvar Constants = _uxcore.Form.Constants,\n FormRowTitle = _uxcore.Form.FormRowTitle,\n FormRow = _uxcore.Form.FormRow,\n SearchFormField = _uxcore.Form.SearchFormField;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var me = this;\n\n var searchOptions = {\n jsxname: 'search',\n dataType: 'jsonp',\n placeholder: '搜索商品',\n jsxfetchUrl: 'http://suggest.taobao.com/sug',\n classOptions: [{\n value: '1',\n text: '类别一'\n }, {\n value: '2',\n text: '类别二'\n }],\n classConfig: {\n placeholder: '类别'\n },\n afterFetch: function afterFetch(obj) {\n var data = {};\n obj.result.forEach(function (item, index) {\n data[item[1]] = item[0];\n });\n return data;\n },\n onIconClick: function onIconClick(e) {\n console.log(me.refs.form.getValues());\n }\n };\n\n var tidyVer = (0, _objectAssign2.default)({}, searchOptions, {\n jsxname: 'tidy',\n tidy: true,\n advancedOptions: [],\n classOptions: []\n });\n\n return React.createElement(\n 'div',\n { className: 'demo-search' },\n React.createElement(\n _uxcore.Form,\n { ref: 'form' },\n React.createElement(FormRowTitle, { jsxtitle: '\\u6807\\u51C6\\u641C\\u7D22' }),\n React.createElement(SearchFormField, searchOptions),\n React.createElement(FormRowTitle, { jsxtitle: '\\u7CBE\\u7B80\\u641C\\u7D22' }),\n React.createElement(SearchFormField, tidyVer)\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-search'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';;\nimport assign from 'object-assign';;\n\nimport { Form } from 'uxcore';\n\nconst {\n Constants,\n FormRowTitle,\n FormRow,\n SearchFormField,\n} = Form;\n\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n\n render() {\n const me = this;\n\n const searchOptions = {\n jsxname: 'search',\n dataType: 'jsonp',\n placeholder: '搜索商品',\n jsxfetchUrl: 'http://suggest.taobao.com/sug',\n classOptions: [\n {\n value: '1',\n text: '类别一',\n },\n {\n value: '2',\n text: '类别二',\n },\n ],\n classConfig: {\n placeholder: '类别',\n },\n afterFetch: (obj) => {\n const data = {};\n obj.result.forEach((item, index) => {\n data[item[1]] = item[0];\n });\n return data;\n },\n onIconClick: (e) => {\n console.log(me.refs.form.getValues());\n },\n };\n\n const tidyVer = assign({}, searchOptions, {\n jsxname: 'tidy',\n tidy: true,\n advancedOptions: [],\n classOptions: [],\n });\n\n\n return (\n <div className=\"demo-search\">\n <Form ref=\"form\">\n <FormRowTitle jsxtitle=\"标准搜索\" />\n <SearchFormField {...searchOptions} />\n <FormRowTitle jsxtitle=\"精简搜索\" />\n <SearchFormField {...tidyVer} />\n </Form>\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-form-demo-search'));</code></pre></div>"},"status":"public","toc":""},{"title":"组件通览 (默认值传递)","id":"components-form-demo-comp","tags":[],"filepath":"site/components/form/demo/comp.md","directory":"components/form/demo","filename":"comp","meta":{"title":"组件通览 (默认值传递)","description":"\n目前 Form 已经提供了12种通用表单域，满足各种场景的需求。\nForm 中所有表单域的默认值由 jsxvalues 统一管理。\n通用表单域不满足业务需求？<a href=\"/scene/commonForm/#code-box-scene-commonform-demo-definefield\">点此查看如何自定义表单域</a>\n","order":"5","filepath":"site/components/form/demo/comp.md","filename":"comp","directory":"components/form/demo","id":"components-form-demo-comp","template":"demos","html":"<style type=\"text/css\">.demo-comp .other {\n padding-top: 16px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.demo-comp .other {\n padding-top: 16px;\n}</code></pre></div><script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\nvar Constants = _uxcore.Form.Constants,\n FormRowTitle = _uxcore.Form.FormRowTitle,\n FormRow = _uxcore.Form.FormRow,\n FormField = _uxcore.Form.FormField,\n InputFormField = _uxcore.Form.InputFormField,\n Validators = _uxcore.Form.Validators,\n RadioGroupFormField = _uxcore.Form.RadioGroupFormField,\n SelectFormField = _uxcore.Form.SelectFormField,\n TextAreaFormField = _uxcore.Form.TextAreaFormField,\n NumberInputFormField = _uxcore.Form.NumberInputFormField,\n DateFormField = _uxcore.Form.DateFormField,\n CheckboxGroupFormField = _uxcore.Form.CheckboxGroupFormField,\n CascadeSelectFormField = _uxcore.Form.CascadeSelectFormField,\n OtherFormFieconstld = _uxcore.Form.OtherFormFieconstld,\n ButtonGroupFormField = _uxcore.Form.ButtonGroupFormField,\n EditorFormField = _uxcore.Form.EditorFormField,\n SwitchFormField = _uxcore.Form.SwitchFormField,\n OtherFormField = _uxcore.Form.OtherFormField;\n\nvar CheckboxItem = CheckboxGroupFormField.Item;\nvar RadioItem = RadioGroupFormField.Item;\nvar Count = InputFormField.Count,\n LeftAddon = InputFormField.LeftAddon,\n RightAddon = InputFormField.RightAddon;\n\nvar Option = SelectFormField.Option;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n showPass: false,\n jsxvalues: {\n test1: '我是测试',\n fruit: 'apple',\n number: 1,\n city: 'nj',\n option: '1',\n // textArea: \"我是多行文本\",\n // date: \"2015-09-01\",\n goods2: ['a', 'b'],\n checkbox: ['sea'],\n dicts: {\n datas: [{\n city: 'hz',\n email: '333',\n name: '33'\n }]\n },\n cascade: ['a', 'ab']\n },\n jsxdata: {\n bj: '北京',\n nj: '南京南京南京南京南京南京南京南京南京南京南京南京南京南京',\n dj: '东京',\n xj: '西京'\n },\n mode: Constants.MODE.EDIT\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleClick',\n value: function handleClick() {\n var me = this;\n console.log(JSON.stringify(me.form.getValues(true)));\n }\n }, {\n key: 'handleSetValues',\n value: function handleSetValues() {\n var me = this;\n me.form.setValues({\n test1: '我不是测试'\n });\n }\n }, {\n key: 'handleShowPassChange',\n value: function handleShowPassChange() {\n var me = this;\n me.setState({\n showPass: !me.state.showPass\n });\n }\n }, {\n key: 'handleFormClick',\n value: function handleFormClick(data) {\n this.form.setState({\n mode: Constants.MODE.VIEW\n });\n }\n }, {\n key: 'update',\n value: function update() {\n console.log('work');\n this.forceUpdate();\n }\n }, {\n key: 'handleChange',\n value: function handleChange(value, name, pass) {\n console.log(value, name, pass);\n var me = this;\n // if (name == 'number') {\n // me.form.setValues({\n // number: 1\n // })\n // }\n }\n }, {\n key: 'handleReset',\n value: function handleReset() {\n this.form.resetValues();\n }\n }, {\n key: 'handleKeyDown',\n value: function handleKeyDown(e) {\n if (e.keyCode == _uxcore.Form.KeyCode.Enter) {\n console.log('enter');\n }\n }\n }, {\n key: 'handleTextAreaBlur',\n value: function handleTextAreaBlur(e, pass) {\n console.log(e, pass);\n }\n }, {\n key: 'changeMode',\n value: function changeMode() {\n this.setState({\n mode: this.state.mode == Constants.MODE.EDIT ? Constants.MODE.VIEW : Constants.MODE.EDIT\n });\n }\n }, {\n key: 'handleValueChange',\n value: function handleValueChange() {\n var me = this;\n me.setState({\n jsxvalues: {\n test1: '我是测试22',\n fruit: 'apple',\n city: [],\n textArea: '我是多行文本',\n date: '2015-09-01',\n checkbox: ['sea']\n // cascade: [\"a\", \"ab\"]\n },\n jsxdata: {\n bj: '北',\n nj: '南',\n dj: '东',\n xj: '西'\n }\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n var me = this;\n var data = {\n test1: '我是测试',\n fruit: 'apple',\n city: 'nj',\n textArea: '我是多行文本',\n date: '2015-09-01',\n checkbox: ['sea']\n // cascade: [\"a\", \"ab\"]\n };\n\n var casData = {\n length: 3,\n contents: [{\n value: 'a',\n text: 'A',\n contents: [{\n value: 'ab',\n text: 'AB',\n contents: [{\n value: 'abc',\n text: 'ABC'\n }, {\n value: 'abd',\n text: 'ABD'\n }]\n }, {\n value: 'ac',\n text: 'AC',\n contents: [{\n value: 'acb',\n text: 'ACB'\n }, {\n value: 'acd',\n text: 'ACD'\n }]\n }]\n }, {\n value: 'b',\n text: 'B',\n contents: [{\n value: 'ba',\n text: 'BA',\n contents: [{\n value: 'bab',\n text: 'BAB'\n }, {\n value: 'bad',\n text: 'BAD'\n }]\n }, {\n value: 'bc',\n text: 'BC',\n contents: [{\n value: 'bca',\n text: 'BCA'\n }, {\n value: 'bcd',\n text: 'BCD'\n }]\n }]\n }]\n };\n\n var columns = [{ dataKey: 'city',\n title: '城市',\n width: 180,\n type: 'select',\n options: {\n hz: '杭州',\n bj: '北京',\n sh: '上海',\n ah: '安徽'\n } }, { dataKey: 'name', title: '姓名', width: 200, type: 'text' }, { dataKey: 'email', title: 'Email', width: 200, type: 'text' }, { dataKey: 'action1',\n title: '操作1',\n width: 100,\n type: 'action',\n actions: {\n 增加: function _(rowData) {\n me.refs.grid.addEmptyRow();\n },\n 删除: function _(rowData) {\n me.refs.grid.delRow(rowData);\n }\n }\n }];\n\n var renderProps = {\n jsxcolumns: columns\n };\n\n var itemsData = [{\n text: '条件一',\n value: 1,\n num: 15\n }, {\n text: '条件二',\n value: 2,\n num: 20\n }, {\n text: '条件三',\n value: 3,\n disable: true\n }];\n\n return React.createElement(\n 'div',\n { className: 'demo-comp' },\n React.createElement(\n _uxcore.Form,\n {\n ref: function ref(c) {\n _this2.form = c;\n },\n instantValidate: true,\n jsxmode: me.state.mode,\n jsxvalues: me.state.jsxvalues,\n jsxonChange: me.handleChange.bind(me)\n },\n React.createElement(FormRowTitle, { jsxtitle: '\\u6211\\u662F\\u884C\\u6807\\u9898' }),\n React.createElement(\n FormRow,\n null,\n React.createElement(\n InputFormField,\n {\n labelMatchInputHeight: true,\n required: true,\n jsxname: 'test1',\n jsxdisabled: false,\n autoTrim: false,\n jsxlabel: '\\u666E\\u901A\\u8F93\\u5165\\u6846\\u666E\\u901A\\u8F93\\u5165\\u6846',\n jsxtips: '\\u8BF7\\u8F93\\u5165\\u6570\\u5B57',\n validateOnBlur: false,\n onKeyDown: me.handleKeyDown.bind(me),\n jsxrules: { validator: Validators.isNotEmpty, errMsg: '不能为空' }\n },\n React.createElement(\n LeftAddon,\n null,\n React.createElement('i', { className: 'kuma-icon kuma-icon-phone' })\n ),\n React.createElement(\n RightAddon,\n null,\n React.createElement(\n 'span',\n { style: { lineHeight: '24px' } },\n '\\u5143'\n )\n ),\n React.createElement(Count, { total: 20 })\n ),\n React.createElement(NumberInputFormField, {\n jsxname: 'number',\n jsxlabel: '\\u6570\\u5B57\\u8F93\\u5165\\u6846',\n jsxtype: 'money',\n delimiter: ',',\n fixedNum: 4,\n jsxplaceholder: '\\u8F93\\u5165\\u6570\\u5B57',\n jsxtips: '\\u6570\\u5B57\\u548C\\u4E00\\u822C\\u7684\\u8F93\\u5165\\u6846\\u4E0D\\u540C',\n jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }, { validator: Validators.isNum, errMsg: '请输入数字' }]\n }),\n React.createElement(\n ButtonGroupFormField,\n { jsxshow: false },\n React.createElement(\n _uxcore.Button,\n { size: 'medium', type: 'primary', action: 'submit', onClick: me.handleFormClick.bind(me) },\n '\\u63D0\\u4EA4'\n ),\n React.createElement(\n _uxcore.Button,\n { size: 'medium', type: 'secondary', action: 'reset' },\n '\\u53D6\\u6D88'\n )\n )\n ),\n React.createElement(\n FormRow,\n null,\n React.createElement(\n RadioGroupFormField,\n { jsxname: 'fruit', jsxlabel: 'Radio', jsxflex: 1 },\n React.createElement(RadioItem, { value: 'apple', text: 'Apple' }),\n React.createElement(RadioItem, { value: 'orange', text: 'Orange' }),\n React.createElement(RadioItem, { value: 'watermelon', text: 'Watermelon' })\n ),\n React.createElement(\n CheckboxGroupFormField,\n { jsxname: 'checkbox', jsxlabel: '\\u590D\\u9009\\u6846' },\n React.createElement(CheckboxItem, { value: 'air', text: '\\u5929\\u7A7A' }),\n React.createElement(CheckboxItem, { value: 'sea', text: '\\u5927\\u6D77' })\n )\n ),\n React.createElement(\n InputFormField,\n { jsxname: 'pass', jsxlabel: '\\u8BF7\\u8F93\\u5165\\u5BC6\\u7801', inputType: me.state.showPass ? 'text' : 'password' },\n React.createElement(\n RightAddon,\n null,\n React.createElement('i', { className: (0, _classnames2.default)({\n 'kuma-icon': true,\n 'kuma-icon-privacy': !me.state.showPass,\n 'kuma-icon-public': me.state.showPass\n }), onClick: me.handleShowPassChange.bind(me)\n })\n )\n ),\n React.createElement(\n FormRow,\n null,\n React.createElement(SwitchFormField, { jsxname: 'switch', jsxlabel: '\\u5F00\\u5173', checkedChildren: '\\u663E\\u793A', unCheckedChildren: '\\u9690\\u85CF' }),\n React.createElement(\n _uxcore.PickableFormField,\n {\n jsxlabel: 'test:',\n jsxname: 'test',\n multiple: true,\n type: 'hook'\n },\n itemsData.map(function (data, index) {\n return React.createElement(\n _uxcore.PickableFormField.Item,\n { key: index, value: data.value, number: data.num, disabled: data.disable },\n data.text\n );\n })\n )\n ),\n React.createElement(TextAreaFormField, { jsxname: 'textArea',\n jsxlabel: '\\u591A\\u884C\\u6587\\u672C\\u6846',\n jsxrules: { validator: Validators.isNotEmpty, errMsg: '不能为空' },\n jsxplaceholder: '\\u6D4B\\u8BD5',\n validateOnBlur: false,\n onBlur: me.handleTextAreaBlur.bind(me)\n }),\n React.createElement(FormRowTitle, { jsxtitle: '\\u6211\\u662F\\u884C\\u6807\\u98982' }),\n React.createElement(\n FormRow,\n null,\n React.createElement(SelectFormField, {\n jsxlabel: '\\u5355\\u9009',\n jsxname: 'city',\n allowClear: true,\n jsxrules: { validator: Validators.isNotEmpty, errMsg: '不能为空' },\n disabled: false,\n jsxdata: me.state.jsxdata\n }),\n React.createElement(DateFormField, { format: 'yyyy-MM-dd HH:mm:ss', jsxname: 'date', jsxlabel: '\\u65E5\\u671F', jsxto: '2016-05-24', locale: 'zh-cn' })\n ),\n React.createElement(\n FormRow,\n null,\n React.createElement(SelectFormField, {\n jsxlabel: '\\u5355\\u9009 combo \\u6A21\\u5F0F',\n disabled: false,\n jsxname: 'goods',\n jsxfetchUrl: 'http://suggest.taobao.com/sug',\n dataType: 'jsonp',\n combobox: true,\n afterFetch: function afterFetch(obj) {\n var data = {};\n obj.result.forEach(function (item, index) {\n data[item[1]] = item[0];\n });\n return data;\n }\n }),\n React.createElement(SelectFormField, {\n jsxlabel: '\\u591A\\u9009\\u6A21\\u5F0F',\n jsxname: 'goods2',\n multiple: true,\n jsxfetchUrl: 'http://suggest.taobao.com/sug',\n jsxdata: {\n a: 'A',\n b: 'B'\n },\n beforeFetch: function beforeFetch(data) {\n console.log(data);\n if (data.q == undefined) {\n data.q = 'a';\n }\n return data;\n },\n dataType: 'jsonp',\n afterFetch: function afterFetch(obj) {\n var newData = {};\n obj.result.forEach(function (item) {\n newData[item[1]] = item[0];\n });\n return newData;\n }\n })\n ),\n React.createElement(\n SelectFormField,\n {\n jsxname: 'option',\n jsxlabel: '\\u4F20 option'\n },\n React.createElement(\n Option,\n { value: '1' },\n '\\u7B2C\\u4E00\\u4E2A\\u9009\\u9879'\n ),\n React.createElement(\n Option,\n { value: '2' },\n '\\u7B2C\\u4E8C\\u4E2A\\u9009\\u9879'\n ),\n React.createElement(\n Option,\n { value: '3' },\n '\\u7B2C\\u4E09\\u4E2A\\u9009\\u9879'\n )\n ),\n React.createElement(FormRowTitle, { jsxtitle: '\\u7EA7\\u8054\\u7C7B' }),\n React.createElement(DateFormField, { showTime: true, jsxtype: 'cascade', jsxname: 'casDate', jsxlabel: '\\u7EA7\\u8054\\u65E5\\u671F', format: 'yyyy/MM/dd' }),\n React.createElement(CascadeSelectFormField, {\n jsxdata: casData,\n allowClear: true,\n jsxplaceholder: ['选项一', '选项二', '选项三'],\n jsxname: 'cascade',\n jsxlabel: '\\u7EA7\\u8054\\u9009\\u62E9'\n }),\n React.createElement(EditorFormField, {\n jsxname: 'editor',\n jsxlabel: '\\u5BCC\\u6587\\u672C\\u7F16\\u8F91\\u5668',\n placeholder: '\\u6D4B\\u8BD5'\n }),\n React.createElement(\n OtherFormField,\n { className: 'other' },\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: '88px', marginRight: '8px' }, onClick: me.handleClick.bind(me) },\n '\\u63D0\\u4EA4'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginRight: '8px' }, type: 'secondary', onClick: me.handleReset.bind(me) },\n '\\u91CD\\u7F6E'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginRight: '8px' }, type: 'secondary', onClick: me.handleSetValues.bind(me) },\n '\\u624B\\u52A8setValues'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginRight: '8px' }, type: 'secondary', onClick: me.handleValueChange.bind(me) },\n '\\u4FEE\\u6539 props'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginRight: '8px' }, type: 'secondary', onClick: me.changeMode.bind(me) },\n '\\u8F6C\\u53D8\\u6A21\\u5F0F'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginRight: '8px' }, type: 'secondary', onClick: me.update.bind(me) },\n '\\u5F3A\\u5236\\u5237\\u65B0'\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-comp'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';;\nimport { Button } from 'uxcore';\nimport { Form } from 'uxcore';\nimport { PickableFormField } from 'uxcore';\nconst {\n Constants,\n FormRowTitle,\n FormRow,\n FormField,\n InputFormField,\n Validators,\n RadioGroupFormField,\n SelectFormField,\n TextAreaFormField,\n NumberInputFormField,\n DateFormField,\n CheckboxGroupFormField,\n CascadeSelectFormField,\n OtherFormFieconstld,\n ButtonGroupFormField,\n EditorFormField,\n SwitchFormField,\n OtherFormField,\n} = Form;\nconst CheckboxItem = CheckboxGroupFormField.Item;\nconst RadioItem = RadioGroupFormField.Item;\nconst { Count, LeftAddon, RightAddon } = InputFormField;\nconst Option = SelectFormField.Option;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n showPass: false,\n jsxvalues: {\n test1: '我是测试',\n fruit: 'apple',\n number: 1,\n city: 'nj',\n option: '1',\n // textArea: \"我是多行文本\",\n // date: \"2015-09-01\",\n goods2: ['a', 'b'],\n checkbox: ['sea'],\n dicts: {\n datas: [\n {\n city: 'hz',\n email: '333',\n name: '33',\n },\n ],\n },\n cascade: ['a', 'ab'],\n },\n jsxdata: {\n bj: '北京',\n nj: '南京南京南京南京南京南京南京南京南京南京南京南京南京南京',\n dj: '东京',\n xj: '西京',\n },\n mode: Constants.MODE.EDIT,\n };\n }\n\n handleClick() {\n const me = this;\n console.log(JSON.stringify(me.form.getValues(true)));\n }\n\n handleSetValues() {\n const me = this;\n me.form.setValues({\n test1: '我不是测试',\n });\n }\n\n handleShowPassChange() {\n const me = this;\n me.setState({\n showPass: !me.state.showPass,\n });\n }\n\n handleFormClick(data) {\n this.form.setState({\n mode: Constants.MODE.VIEW,\n });\n }\n\n update() {\n console.log('work');\n this.forceUpdate();\n }\n\n handleChange(value, name, pass) {\n console.log(value, name, pass);\n const me = this;\n // if (name == 'number') {\n // me.form.setValues({\n // number: 1\n // })\n // }\n }\n\n handleReset() {\n this.form.resetValues();\n }\n\n handleKeyDown(e) {\n if (e.keyCode == Form.KeyCode.Enter) {\n console.log('enter');\n }\n }\n\n handleTextAreaBlur(e, pass) {\n console.log(e, pass);\n }\n\n changeMode() {\n this.setState({\n mode: this.state.mode == Constants.MODE.EDIT ? Constants.MODE.VIEW : Constants.MODE.EDIT,\n });\n }\n\n handleValueChange() {\n const me = this;\n me.setState({\n jsxvalues: {\n test1: '我是测试22',\n fruit: 'apple',\n city: [],\n textArea: '我是多行文本',\n date: '2015-09-01',\n checkbox: ['sea'],\n // cascade: [\"a\", \"ab\"]\n },\n jsxdata: {\n bj: '北',\n nj: '南',\n dj: '东',\n xj: '西',\n },\n });\n }\n\n render() {\n const me = this;\n const data = {\n test1: '我是测试',\n fruit: 'apple',\n city: 'nj',\n textArea: '我是多行文本',\n date: '2015-09-01',\n checkbox: ['sea'],\n // cascade: [\"a\", \"ab\"]\n };\n\n const casData = {\n length: 3,\n contents: [\n {\n value: 'a',\n text: 'A',\n contents: [\n {\n value: 'ab',\n text: 'AB',\n contents: [\n {\n value: 'abc',\n text: 'ABC',\n },\n {\n value: 'abd',\n text: 'ABD',\n },\n ],\n },\n {\n value: 'ac',\n text: 'AC',\n contents: [\n {\n value: 'acb',\n text: 'ACB',\n },\n {\n value: 'acd',\n text: 'ACD',\n },\n ],\n },\n ],\n },\n {\n value: 'b',\n text: 'B',\n contents: [\n {\n value: 'ba',\n text: 'BA',\n contents: [\n {\n value: 'bab',\n text: 'BAB',\n },\n {\n value: 'bad',\n text: 'BAD',\n },\n ],\n },\n {\n value: 'bc',\n text: 'BC',\n contents: [\n {\n value: 'bca',\n text: 'BCA',\n },\n {\n value: 'bcd',\n text: 'BCD',\n },\n ],\n },\n ],\n },\n ],\n };\n\n\n const columns = [\n { dataKey: 'city',\n title: '城市',\n width: 180,\n type: 'select',\n options: {\n hz: '杭州',\n bj: '北京',\n sh: '上海',\n ah: '安徽',\n } },\n { dataKey: 'name', title: '姓名', width: 200, type: 'text' },\n { dataKey: 'email', title: 'Email', width: 200, type: 'text' },\n { dataKey: 'action1',\n title: '操作1',\n width: 100,\n type: 'action',\n actions: {\n 增加(rowData) {\n me.refs.grid.addEmptyRow();\n },\n 删除(rowData) {\n me.refs.grid.delRow(rowData);\n },\n },\n },\n ];\n\n\n const renderProps = {\n jsxcolumns: columns,\n };\n\n const itemsData = [{\n text: '条件一',\n value: 1,\n num: 15,\n }, {\n text: '条件二',\n value: 2,\n num: 20,\n }, {\n text: '条件三',\n value: 3,\n disable: true,\n }];\n\n return (\n <div className=\"demo-comp\">\n <Form\n ref={(c) => { this.form = c; }}\n instantValidate\n jsxmode={me.state.mode}\n jsxvalues={me.state.jsxvalues}\n jsxonChange={me.handleChange.bind(me)}\n >\n <FormRowTitle jsxtitle=\"我是行标题\" />\n <FormRow>\n <InputFormField\n labelMatchInputHeight\n required\n jsxname=\"test1\"\n jsxdisabled={false}\n autoTrim={false}\n jsxlabel=\"普通输入框普通输入框\"\n jsxtips=\"请输入数字\"\n validateOnBlur={false}\n onKeyDown={me.handleKeyDown.bind(me)}\n jsxrules={{ validator: Validators.isNotEmpty, errMsg: '不能为空' }}\n >\n <LeftAddon>\n \n </LeftAddon>\n <RightAddon>\n 元\n </RightAddon>\n <Count total={20} />\n </InputFormField>\n <NumberInputFormField\n jsxname=\"number\"\n jsxlabel=\"数字输入框\"\n jsxtype=\"money\"\n delimiter=\",\"\n fixedNum={4}\n jsxplaceholder=\"输入数字\"\n jsxtips=\"数字和一般的输入框不同\"\n jsxrules={[\n { validator: Validators.isNotEmpty, errMsg: '不能为空' },\n { validator: Validators.isNum, errMsg: '请输入数字' },\n ]}\n />\n\n <ButtonGroupFormField jsxshow={false}>\n <Button size=\"medium\" type=\"primary\" action=\"submit\" onClick={me.handleFormClick.bind(me)}>提交</Button>\n <Button size=\"medium\" type=\"secondary\" action=\"reset\">取消</Button>\n </ButtonGroupFormField>\n </FormRow>\n <FormRow>\n <RadioGroupFormField jsxname=\"fruit\" jsxlabel=\"Radio\" jsxflex={1}>\n <RadioItem value=\"apple\" text=\"Apple\" />\n <RadioItem value=\"orange\" text=\"Orange\" />\n <RadioItem value=\"watermelon\" text=\"Watermelon\" />\n </RadioGroupFormField>\n <CheckboxGroupFormField jsxname=\"checkbox\" jsxlabel=\"复选框\">\n <CheckboxItem value=\"air\" text=\"天空\" />\n <CheckboxItem value=\"sea\" text=\"大海\" />\n </CheckboxGroupFormField>\n </FormRow>\n <InputFormField jsxname=\"pass\" jsxlabel=\"请输入密码\" inputType={me.state.showPass ? 'text' : 'password'}>\n <RightAddon>\n \n </RightAddon>\n </InputFormField>\n <FormRow>\n <SwitchFormField jsxname=\"switch\" jsxlabel=\"开关\" checkedChildren=\"显示\" unCheckedChildren=\"隐藏\" />\n <PickableFormField\n jsxlabel=\"test:\"\n jsxname=\"test\"\n multiple\n type=\"hook\"\n >\n {itemsData.map((data, index) => (\n <PickableFormField.Item key={index} value={data.value} number={data.num} disabled={data.disable}>{data.text}</PickableFormField.Item>\n ))}\n </PickableFormField>\n </FormRow>\n <TextAreaFormField jsxname=\"textArea\"\n jsxlabel=\"多行文本框\"\n jsxrules={{ validator: Validators.isNotEmpty, errMsg: '不能为空' }}\n jsxplaceholder=\"测试\"\n validateOnBlur={false}\n onBlur={me.handleTextAreaBlur.bind(me)}\n />\n <FormRowTitle jsxtitle=\"我是行标题2\" />\n <FormRow>\n <SelectFormField\n jsxlabel=\"单选\"\n jsxname=\"city\"\n allowClear\n jsxrules={{ validator: Validators.isNotEmpty, errMsg: '不能为空' }}\n disabled={false}\n jsxdata={me.state.jsxdata}\n />\n <DateFormField format=\"yyyy-MM-dd HH:mm:ss\" jsxname=\"date\" jsxlabel=\"日期\" jsxto={'2016-05-24'} locale=\"zh-cn\" />\n </FormRow>\n <FormRow>\n <SelectFormField\n jsxlabel=\"单选 combo 模式\"\n disabled={false}\n jsxname=\"goods\"\n jsxfetchUrl=\"http://suggest.taobao.com/sug\"\n dataType=\"jsonp\"\n combobox\n afterFetch={(obj) => {\n const data = {};\n obj.result.forEach((item, index) => {\n data[item[1]] = item[0];\n });\n return data;\n }}\n />\n <SelectFormField\n jsxlabel=\"多选模式\"\n jsxname=\"goods2\"\n multiple\n jsxfetchUrl=\"http://suggest.taobao.com/sug\"\n jsxdata={{\n a: 'A',\n b: 'B',\n }}\n beforeFetch={function (data) {\n console.log(data);\n if (data.q == undefined) {\n data.q = 'a';\n }\n return data;\n }}\n dataType=\"jsonp\"\n afterFetch={(obj) => {\n const newData = {};\n obj.result.forEach((item) => {\n newData[item[1]] = item[0];\n });\n return newData;\n }}\n />\n </FormRow>\n <SelectFormField\n jsxname=\"option\"\n jsxlabel=\"传 option\"\n >\n <Option value=\"1\">第一个选项</Option>\n <Option value=\"2\">第二个选项</Option>\n <Option value=\"3\">第三个选项</Option>\n </SelectFormField>\n <FormRowTitle jsxtitle=\"级联类\" />\n <DateFormField showTime jsxtype=\"cascade\" jsxname=\"casDate\" jsxlabel=\"级联日期\" format=\"yyyy/MM/dd\" />\n <CascadeSelectFormField\n jsxdata={casData}\n allowClear\n jsxplaceholder={['选项一', '选项二', '选项三']}\n jsxname=\"cascade\"\n jsxlabel=\"级联选择\"\n />\n <EditorFormField\n jsxname=\"editor\"\n jsxlabel=\"富文本编辑器\"\n placeholder=\"测试\"\n />\n\n <OtherFormField className=\"other\">\n <Button style={{ marginLeft: '88px', marginRight: '8px' }} onClick={me.handleClick.bind(me)}>提交</Button>\n <Button style={{ marginRight: '8px' }} type=\"secondary\" onClick={me.handleReset.bind(me)}>重置</Button>\n <Button style={{ marginRight: '8px' }} type=\"secondary\" onClick={me.handleSetValues.bind(me)}>手动setValues</Button>\n <Button style={{ marginRight: '8px' }} type=\"secondary\" onClick={me.handleValueChange.bind(me)}>修改 props</Button>\n <Button style={{ marginRight: '8px' }} type=\"secondary\" onClick={me.changeMode.bind(me)}>转变模式</Button>\n <Button style={{ marginRight: '8px' }} type=\"secondary\" onClick={me.update.bind(me)}>强制刷新</Button>\n </OtherFormField>\n </Form>\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-form-demo-comp'));</code></pre></div>"},"status":"public","toc":""}]

基本使用

无需任何绑定，只要插入几个标签，就可以完成一个表格的搭建。

.demo-basic {
  max-width: 652px;
}

import { Button } from 'uxcore';
import { Form } from 'uxcore';

const {
  InputFormField: Input,
  DateFormField: Date,
  TextAreaFormField: TextArea,
  OtherFormField: Other,
} = Form;


class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  handleSubmit() {
    console.log(this.form.getValues());
  }

  render() {
    return (
      <div className="demo-basic">
        <Form ref={(c) => { this.form = c; }} className="demo-basic-form">
          <Input jsxname="theme" jsxlabel="主题" jsxplaceholder="请输入主题" />
          <Input jsxname="location" jsxlabel="地点" jsxplaceholder="请输入地点" />
          <Date jsxname="date" jsxlabel="时间" jsxtype="cascade" autoMatchWidth />
          <TextArea jsxname="content" jsxlabel="内容" inputBoxMaxWidth="large" />
          <Other>
            <Button style={{ marginLeft: '88px', marginTop: '16px' }} onClick={() => { this.handleSubmit(); }}>确定</Button>
          </Other>
        </Form>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-form-demo-basic'));

布局

提供竖向和横向两种排列方式

.demo-layout {
  max-width: 652px;
}

import { Button } from 'uxcore';
import { Form } from 'uxcore';
const {
    Constants,
    FormRowTitle,
    FormRow: Row,
    InputFormField: Input,
    SelectFormField: Select,
    DateFormField: Date,
    TextAreaFormField: TextArea,
    ButtonGroupFormField,
    OtherFormField: Other,
} = Form;


class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      values: {
        layout: 'h',
      },
    };
  }

  handleSubmit() {
    console.log(this.form.getValues());
  }

  handleChange(values) {
    this.setState({
      values,
    });
  }

  render() {
    const me = this;
    const isV = () => this.state.values.layout === 'v';
    return (
      <div className="demo-layout">
        <Form
          ref={(c) => { this.form = c; }}
          className="demo-basic-form"
          jsxvalues={this.state.values}
          jsxonChange={(values) => { this.handleChange(values); }}
          verticalAlign={isV()}
        >
          <Select
            jsxname="layout"
            jsxlabel="布局"
            jsxdata={[
              { value: 'h', text: '横向' },
              { value: 'v', text: '竖向' },
            ]}
          />
          <Input jsxname="location" jsxlabel="地点" jsxplaceholder="请输入地点" />
          <Date jsxname="date" jsxlabel="时间" jsxtype="cascade" autoMatchWidth />
          <TextArea jsxname="content" jsxlabel="内容" />
          <Other>
            <Button style={{ marginLeft: isV() ? '0px' : '88px', marginTop: '16px' }} onClick={me.handleSubmit.bind(me)}>确定</Button>
          </Other>
        </Form>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-form-demo-layout'));

尺寸

提供 large/middle/small 三种尺寸

.demo-size {
  max-width: 652px;
}

import { Button } from 'uxcore';
import { Form } from 'uxcore';
const {
    Constants,
    FormRowTitle,
    FormRow: Row,
    InputFormField: Input,
    SelectFormField: Select,
    DateFormField: Date,
    TextAreaFormField: TextArea,
    ButtonGroupFormField,
    OtherFormField: Other,
} = Form;


class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      values: {
        size: 'large',
      },
    };
  }

  handleSubmit() {
    console.log(this.form.getValues());
  }

  handleChange(values) {
    this.setState({
      values,
    });
  }

  render() {
    const me = this;
    return (
      <div className="demo-size">
        <Form
          ref={(c) => { this.form = c; }}
          className="demo-basic-form"
          jsxvalues={this.state.values}
          jsxonChange={(values) => { this.handleChange(values); }}
          size={this.state.values.size}
        >
          <Select
            jsxname="size"
            jsxlabel="尺寸"
            jsxdata={[
              { value: 'large', text: '大' },
              { value: 'middle', text: '中' },
              { value: 'small', text: '小' },
            ]}
          />
          <Input jsxname="location" jsxlabel="地点" jsxplaceholder="请输入地点" />
          <Date jsxname="date" jsxlabel="时间" jsxtype="cascade" autoMatchWidth />
          <TextArea jsxname="content" jsxlabel="内容" />
          <Other>
            <Button style={{ marginLeft: '88px', marginTop: this.state.values.size === 'small' ? '12px' : '16px' }} onClick={me.handleSubmit.bind(me)}>确定</Button>
          </Other>
        </Form>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-form-demo-size'));

校验和提示

自带验证函数，并且支持自己手写，并分为实时验证与非实时验证。

.demo-validator {
  max-width: 652px;
}


import { Button } from 'uxcore';
import { Form } from 'uxcore';
import { Icon } from 'uxcore';
import { Tooltip } from 'uxcore';

const {
  InputFormField: Input,
  DateFormField: Date,
  TextAreaFormField: TextArea,
  OtherFormField,
  SelectFormField,
  Validators,
} = Form;


class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      mode: true,
    };
  }

  handleSubmit() {
    console.log(this.form.getValues(true));
  }

  handleModeChange(values, name) {
    console.log(values[name]);
    this.setState({
      mode: values[name] === 'true',
    });
  }

  render() {
    const me = this;
    return (
      <div className="demo-validator">
        <Form className="form-select" jsxvalues={{ mode: 'true' }} jsxonChange={me.handleModeChange.bind(me)}>
          <SelectFormField jsxdata={{ true: '实时校验', false: '非实时校验' }} jsxname="mode" jsxlabel="校验模式" showSearch={false} />
        </Form>
        <Form ref={(c) => { this.form = c; }} className="demo-basic-form" instantValidate={me.state.mode}>
          <Input
            jsxname="theme"
            jsxlabel="主题"
            required
            jsxtips="这是一个提示"
            jsxplaceholder="请输入主题"
            jsxrules={[
              { validator: Validators.isNotEmpty, errMsg: '不能为空' },
              { validator(value) { return value.length <= 3; }, errMsg: '不能超过3个字' },
            ]}
          />
          <Input
            jsxname="location"
            jsxlabel="地点"
            required
            jsxplaceholder="请输入地点"
            jsxrules={[
              { validator: Validators.isNotEmpty, errMsg: '不能为空' },
            ]}
          />
          <Date jsxname="date" jsxlabel="时间" jsxtype="cascade" autoMatchWidth />
          <TextArea
            jsxname="content"
            jsxlabel="内容"
            required
            jsxrules={[
              { validator: Validators.isNotEmpty, errMsg: '不能为空' },
            ]}
          />
          <OtherFormField>
            <Button style={{ marginLeft: '88px', marginTop: '16px' }} onClick={me.handleSubmit.bind(me)}>确定</Button>
          </OtherFormField>
        </Form>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-form-demo-validator'));

横向排列

无需任何设置，自动实现横排，并可以根据系数进行弹性布局。

.demo-horizon {
  max-width: 652px;
}

import { Button } from 'uxcore';
import { Form } from 'uxcore';
const {
    Constants,
    FormRowTitle,
    FormRow: Row,
    InputFormField: Input,
    DateFormField: Date,
    TextAreaFormField: TextArea,
    OtherFormField,
    Validators,
} = Form;


class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  handleSubmit() {
    console.log(this.refs.form.getValues());
  }

  render() {
    const me = this;
    return (
      <div className="demo-horizon">
        <style />
        <Form ref="form" className="demo-horizon-form">
          <Row>
            <Input jsxname="theme" jsxlabel="主题" required jsxplaceholder="请输入主题" jsxrules={[
                            { validator: Validators.isNotEmpty, errMsg: '不能为空' },
                            { validator(value) { return value.length < 3; }, errMsg: '不能超过3个字' },
            ]}
            />
            <Input jsxname="location" jsxlabel="地点" required jsxplaceholder="请输入地点" jsxrules={[
                            { validator: Validators.isNotEmpty, errMsg: '不能为空' },
            ]}
            />
          </Row>
          <TextArea jsxname="content" jsxlabel="内容" required jsxrules={[
                        { validator: Validators.isNotEmpty, errMsg: '不能为空' },
          ]}
          />
          <OtherFormField>
            <Button style={{ marginLeft: '88px', marginTop: '16px' }} onClick={me.handleSubmit.bind(me)}>确定</Button>
          </OtherFormField>
        </Form>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-form-demo-horizon'));

输入区域最大宽度

为了应对一些宽屏情况下自适应过长的问题，我们提供了两套最大宽度限制。

import { Button } from 'uxcore';
import { Form } from 'uxcore';

const {
  InputFormField: Input,
  TextAreaFormField: TextArea,
  OtherFormField: Other,
} = Form;


class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  handleSubmit() {
    console.log(this.form.getValues());
  }

  render() {
    return (
      <div className="demo-max-width">
        <Form ref={(c) => { this.form = c; }} className="demo-basic-form">
          <Input jsxname="theme" jsxlabel="主题" jsxplaceholder="请输入主题" inputBoxMaxWidth="middle" />
          <Input jsxname="location" jsxlabel="地点" jsxplaceholder="请输入地点" inputBoxMaxWidth="middle" />
          <TextArea jsxname="content" jsxlabel="内容" inputBoxMaxWidth="large" />
          <Other>
            <Button style={{ marginLeft: '88px', marginTop: '16px' }} onClick={() => { this.handleSubmit(); }}>确定</Button>
          </Other>
        </Form>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-form-demo-max-width'));

编辑查看模式

Form 支持编辑和查看两种模式，并且支持随时切换，从此两个页面变成一个页面。

.demo-mode {
  max-width: 652px;
}
.demo-mode .other {
  padding-top: 16px;
}


import { Button } from 'uxcore';
import { Form } from 'uxcore';
const {
  Constants,
  FormRowTitle,
  FormRow: Row,
  InputFormField: Input,
  DateFormField: Date,
  TextAreaFormField: TextArea,
  OtherFormField,
  SelectFormField,
  Validators,
} = Form;


class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      mode: Constants.MODE.EDIT,
    };
  }

  handleSubmit() {
    console.log(this.form.getValues());
  }

  handleChangeMode() {
    this.setState({
      mode: this.state.mode === Constants.MODE.EDIT ? Constants.MODE.VIEW : Constants.MODE.EDIT,
    });
  }

  render() {
    const me = this;
    return (
      <div className="demo-mode">
        <Form
          ref={(c) => { this.form = c; }}
          className="demo-basic-form"
          jsxvalues={{
            theme: 'Form 展示',
            location: 'Uxcore 站点',
            date: ['2015-10-15', '2015-11-15'],
            content: '这是一个 Form 的模式转换页面。',
          }}
          jsxmode={me.state.mode}
        >
          <Input jsxname="theme" jsxlabel="主题" required jsxplaceholder="请输入主题" />
          <Input
            jsxname="location"
            jsxlabel="地点"
            required
            jsxplaceholder="请输入地点"
            jsxrules={[
          { validator: Validators.isNotEmpty, errMsg: '不能为空' },
            ]}
          />
          <Date jsxname="date" jsxlabel="时间" jsxtype="cascade" autoMatchWidth />
          <TextArea
            jsxname="content"
            jsxlabel="内容"
            required
            jsxrules={[
            { validator: Validators.isNotEmpty, errMsg: '不能为空' },
            ]}
          />
          <OtherFormField className="other">
            <Button style={{ marginLeft: '88px', marginRight: '8px' }} onClick={me.handleSubmit.bind(me)}>确定</Button>
            <Button style={{ marginRight: '8px' }} type="secondary" onClick={me.handleChangeMode.bind(me)}>转换模式</Button>
          </OtherFormField>
        </Form>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-form-demo-mode'));

搜索框

提供复杂和精简的两种搜索模式。

.demo-search {
  max-width: 652px;
}

import classnames from 'classnames';;
import assign from 'object-assign';;

import { Form } from 'uxcore';

const {
    Constants,
    FormRowTitle,
    FormRow,
    SearchFormField,
} = Form;


class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }


  render() {
    const me = this;

    const searchOptions = {
      jsxname: 'search',
      dataType: 'jsonp',
      placeholder: '搜索商品',
      jsxfetchUrl: 'http://suggest.taobao.com/sug',
      classOptions: [
        {
          value: '1',
          text: '类别一',
        },
        {
          value: '2',
          text: '类别二',
        },
      ],
      classConfig: {
        placeholder: '类别',
      },
      afterFetch: (obj) => {
        const data = {};
        obj.result.forEach((item, index) => {
          data[item[1]] = item[0];
        });
        return data;
      },
      onIconClick: (e) => {
        console.log(me.refs.form.getValues());
      },
    };

    const tidyVer = assign({}, searchOptions, {
      jsxname: 'tidy',
      tidy: true,
      advancedOptions: [],
      classOptions: [],
    });


    return (
      <div className="demo-search">
        <Form ref="form">
          <FormRowTitle jsxtitle="标准搜索" />
          <SearchFormField {...searchOptions} />
          <FormRowTitle jsxtitle="精简搜索" />
          <SearchFormField {...tidyVer} />
        </Form>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-form-demo-search'));

组件通览 (默认值传递)

目前 Form 已经提供了12种通用表单域，满足各种场景的需求。 Form 中所有表单域的默认值由 jsxvalues 统一管理。通用表单域不满足业务需求？点此查看如何自定义表单域

.demo-comp .other {
  padding-top: 16px;
}

import classnames from 'classnames';;
import { Button } from 'uxcore';
import { Form } from 'uxcore';
import { PickableFormField } from 'uxcore';
const {
    Constants,
    FormRowTitle,
    FormRow,
    FormField,
    InputFormField,
    Validators,
    RadioGroupFormField,
    SelectFormField,
    TextAreaFormField,
    NumberInputFormField,
    DateFormField,
    CheckboxGroupFormField,
    CascadeSelectFormField,
    OtherFormFieconstld,
    ButtonGroupFormField,
    EditorFormField,
    SwitchFormField,
    OtherFormField,
} = Form;
const CheckboxItem = CheckboxGroupFormField.Item;
const RadioItem = RadioGroupFormField.Item;
const { Count, LeftAddon, RightAddon } = InputFormField;
const Option = SelectFormField.Option;

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      showPass: false,
      jsxvalues: {
        test1: '我是测试',
        fruit: 'apple',
        number: 1,
        city: 'nj',
        option: '1',
                // textArea: "我是多行文本",
                // date: "2015-09-01",
        goods2: ['a', 'b'],
        checkbox: ['sea'],
        dicts: {
          datas: [
            {
              city: 'hz',
              email: '333',
              name: '33',
            },
          ],
        },
        cascade: ['a', 'ab'],
      },
      jsxdata: {
        bj: '北京',
        nj: '南京南京南京南京南京南京南京南京南京南京南京南京南京南京',
        dj: '东京',
        xj: '西京',
      },
      mode: Constants.MODE.EDIT,
    };
  }

  handleClick() {
    const me = this;
    console.log(JSON.stringify(me.form.getValues(true)));
  }

  handleSetValues() {
    const me = this;
    me.form.setValues({
      test1: '我不是测试',
    });
  }

  handleShowPassChange() {
    const me = this;
    me.setState({
      showPass: !me.state.showPass,
    });
  }

  handleFormClick(data) {
    this.form.setState({
      mode: Constants.MODE.VIEW,
    });
  }

  update() {
    console.log('work');
    this.forceUpdate();
  }

  handleChange(value, name, pass) {
    console.log(value, name, pass);
    const me = this;
        // if (name == 'number') {
        //     me.form.setValues({
        //         number: 1
        //     })
        // }
  }

  handleReset() {
    this.form.resetValues();
  }

  handleKeyDown(e) {
    if (e.keyCode == Form.KeyCode.Enter) {
      console.log('enter');
    }
  }

  handleTextAreaBlur(e, pass) {
    console.log(e, pass);
  }

  changeMode() {
    this.setState({
      mode: this.state.mode == Constants.MODE.EDIT ? Constants.MODE.VIEW : Constants.MODE.EDIT,
    });
  }

  handleValueChange() {
    const me = this;
    me.setState({
      jsxvalues: {
        test1: '我是测试22',
        fruit: 'apple',
        city: [],
        textArea: '我是多行文本',
        date: '2015-09-01',
        checkbox: ['sea'],
                // cascade: ["a", "ab"]
      },
      jsxdata: {
        bj: '北',
        nj: '南',
        dj: '东',
        xj: '西',
      },
    });
  }

  render() {
    const me = this;
    const data = {
      test1: '我是测试',
      fruit: 'apple',
      city: 'nj',
      textArea: '我是多行文本',
      date: '2015-09-01',
      checkbox: ['sea'],
            // cascade: ["a", "ab"]
    };

    const casData = {
      length: 3,
      contents: [
        {
          value: 'a',
          text: 'A',
          contents: [
            {
              value: 'ab',
              text: 'AB',
              contents: [
                {
                  value: 'abc',
                  text: 'ABC',
                },
                {
                  value: 'abd',
                  text: 'ABD',
                },
              ],
            },
            {
              value: 'ac',
              text: 'AC',
              contents: [
                {
                  value: 'acb',
                  text: 'ACB',
                },
                {
                  value: 'acd',
                  text: 'ACD',
                },
              ],
            },
          ],
        },
        {
          value: 'b',
          text: 'B',
          contents: [
            {
              value: 'ba',
              text: 'BA',
              contents: [
                {
                  value: 'bab',
                  text: 'BAB',
                },
                {
                  value: 'bad',
                  text: 'BAD',
                },
              ],
            },
            {
              value: 'bc',
              text: 'BC',
              contents: [
                {
                  value: 'bca',
                  text: 'BCA',
                },
                {
                  value: 'bcd',
                  text: 'BCD',
                },
              ],
            },
          ],
        },
      ],
    };


    const columns = [
      { dataKey: 'city',
        title: '城市',
        width: 180,
        type: 'select',
        options: {
          hz: '杭州',
          bj: '北京',
          sh: '上海',
          ah: '安徽',
        } },
            { dataKey: 'name', title: '姓名', width: 200, type: 'text' },
            { dataKey: 'email', title: 'Email', width: 200, type: 'text' },
      { dataKey: 'action1',
        title: '操作1',
        width: 100,
        type: 'action',
        actions: {
          增加(rowData) {
            me.refs.grid.addEmptyRow();
          },
          删除(rowData) {
            me.refs.grid.delRow(rowData);
          },
        },
      },
    ];


    const renderProps = {
      jsxcolumns: columns,
    };

    const itemsData = [{
      text: '条件一',
      value: 1,
      num: 15,
    }, {
      text: '条件二',
      value: 2,
      num: 20,
    }, {
      text: '条件三',
      value: 3,
      disable: true,
    }];

    return (
      <div className="demo-comp">
        <Form
          ref={(c) => { this.form = c; }}
          instantValidate
          jsxmode={me.state.mode}
          jsxvalues={me.state.jsxvalues}
          jsxonChange={me.handleChange.bind(me)}
        >
          <FormRowTitle jsxtitle="我是行标题" />
          <FormRow>
            <InputFormField
              labelMatchInputHeight
              required
              jsxname="test1"
              jsxdisabled={false}
              autoTrim={false}
              jsxlabel="普通输入框普通输入框"
              jsxtips="请输入数字"
              validateOnBlur={false}
              onKeyDown={me.handleKeyDown.bind(me)}
              jsxrules={{ validator: Validators.isNotEmpty, errMsg: '不能为空' }}
            >
              <LeftAddon>
                <i className="kuma-icon kuma-icon-phone" />
              </LeftAddon>
              <RightAddon>
                <span style={{ lineHeight: '24px' }}>元</span>
              </RightAddon>
              <Count total={20} />
            </InputFormField>
            <NumberInputFormField
              jsxname="number"
              jsxlabel="数字输入框"
              jsxtype="money"
              delimiter=","
              fixedNum={4}
              jsxplaceholder="输入数字"
              jsxtips="数字和一般的输入框不同"
              jsxrules={[
                            { validator: Validators.isNotEmpty, errMsg: '不能为空' },
                            { validator: Validators.isNum, errMsg: '请输入数字' },
              ]}
            />

            <ButtonGroupFormField jsxshow={false}>
              <Button size="medium" type="primary" action="submit" onClick={me.handleFormClick.bind(me)}>提交</Button>
              <Button size="medium" type="secondary" action="reset">取消</Button>
            </ButtonGroupFormField>
          </FormRow>
          <FormRow>
            <RadioGroupFormField jsxname="fruit" jsxlabel="Radio" jsxflex={1}>
              <RadioItem value="apple" text="Apple" />
              <RadioItem value="orange" text="Orange" />
              <RadioItem value="watermelon" text="Watermelon" />
            </RadioGroupFormField>
            <CheckboxGroupFormField jsxname="checkbox" jsxlabel="复选框">
              <CheckboxItem value="air" text="天空" />
              <CheckboxItem value="sea" text="大海" />
            </CheckboxGroupFormField>
          </FormRow>
          <InputFormField jsxname="pass" jsxlabel="请输入密码" inputType={me.state.showPass ? 'text' : 'password'}>
            <RightAddon>
              <i className={classnames({
                'kuma-icon': true,
                'kuma-icon-privacy': !me.state.showPass,
                'kuma-icon-public': me.state.showPass,
              })} onClick={me.handleShowPassChange.bind(me)}
              />
            </RightAddon>
          </InputFormField>
          <FormRow>
            <SwitchFormField jsxname="switch" jsxlabel="开关" checkedChildren="显示" unCheckedChildren="隐藏" />
            <PickableFormField
              jsxlabel="test:"
              jsxname="test"
              multiple
              type="hook"
            >
              {itemsData.map((data, index) => (
                <PickableFormField.Item key={index} value={data.value} number={data.num} disabled={data.disable}>{data.text}</PickableFormField.Item>
                              ))}
            </PickableFormField>
          </FormRow>
          <TextAreaFormField jsxname="textArea"
            jsxlabel="多行文本框"
            jsxrules={{ validator: Validators.isNotEmpty, errMsg: '不能为空' }}
            jsxplaceholder="测试"
            validateOnBlur={false}
            onBlur={me.handleTextAreaBlur.bind(me)}
          />
          <FormRowTitle jsxtitle="我是行标题2" />
          <FormRow>
            <SelectFormField
              jsxlabel="单选"
              jsxname="city"
              allowClear
              jsxrules={{ validator: Validators.isNotEmpty, errMsg: '不能为空' }}
              disabled={false}
              jsxdata={me.state.jsxdata}
            />
            <DateFormField format="yyyy-MM-dd HH:mm:ss" jsxname="date" jsxlabel="日期" jsxto={'2016-05-24'} locale="zh-cn" />
          </FormRow>
          <FormRow>
            <SelectFormField
              jsxlabel="单选 combo 模式"
              disabled={false}
              jsxname="goods"
              jsxfetchUrl="http://suggest.taobao.com/sug"
              dataType="jsonp"
              combobox
              afterFetch={(obj) => {
                const data = {};
                obj.result.forEach((item, index) => {
                  data[item[1]] = item[0];
                });
                return data;
              }}
            />
            <SelectFormField
              jsxlabel="多选模式"
              jsxname="goods2"
              multiple
              jsxfetchUrl="http://suggest.taobao.com/sug"
              jsxdata={{
                a: 'A',
                b: 'B',
              }}
              beforeFetch={function (data) {
                console.log(data);
                if (data.q == undefined) {
                  data.q = 'a';
                }
                return data;
              }}
              dataType="jsonp"
              afterFetch={(obj) => {
                const newData = {};
                obj.result.forEach((item) => {
                  newData[item[1]] = item[0];
                });
                return newData;
              }}
            />
          </FormRow>
          <SelectFormField
            jsxname="option"
            jsxlabel="传 option"
          >
            <Option value="1">第一个选项</Option>
            <Option value="2">第二个选项</Option>
            <Option value="3">第三个选项</Option>
          </SelectFormField>
          <FormRowTitle jsxtitle="级联类" />
          <DateFormField showTime jsxtype="cascade" jsxname="casDate" jsxlabel="级联日期" format="yyyy/MM/dd" />
          <CascadeSelectFormField
            jsxdata={casData}
            allowClear
            jsxplaceholder={['选项一', '选项二', '选项三']}
            jsxname="cascade"
            jsxlabel="级联选择"
          />
          <EditorFormField
            jsxname="editor"
            jsxlabel="富文本编辑器"
            placeholder="测试"
          />

          <OtherFormField className="other">
            <Button style={{ marginLeft: '88px', marginRight: '8px' }} onClick={me.handleClick.bind(me)}>提交</Button>
            <Button style={{ marginRight: '8px' }} type="secondary" onClick={me.handleReset.bind(me)}>重置</Button>
            <Button style={{ marginRight: '8px' }} type="secondary" onClick={me.handleSetValues.bind(me)}>手动setValues</Button>
            <Button style={{ marginRight: '8px' }} type="secondary" onClick={me.handleValueChange.bind(me)}>修改 props</Button>
            <Button style={{ marginRight: '8px' }} type="secondary" onClick={me.changeMode.bind(me)}>转变模式</Button>
            <Button style={{ marginRight: '8px' }} type="secondary" onClick={me.update.bind(me)}>强制刷新</Button>
          </OtherFormField>
        </Form>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-form-demo-comp'));

更多使用场景，请参考场景 -> 表单相关部分。

API

Form

getValues(force) 获取目前的 values 和 pass（是否通过检测）。参数：
- force Boolean: 强制校验或不校验，undefined 时则忽略此配置。
resetValues() 重置所有的 FormField，如果有默认值则重置为默认值。
setValues(data) 手动设置各个 FormField 的值，在表单联动时可能会用得到。参数：
- data Object: 和 jsxvalues 的格式相同。
isDirty() 获取目前的表单是否没有通过检测，返回 true 或 false。
doValidate(force, always) 获取目前的表单是否通过检测，返回 true 或者 false。
- force：是否强制校验，无视不校验的规则。
- always：强制校验通过或者失败，通常可以用于清空出错状态。
doValidateAndScroll(force, always) 获取目前的表单是否通过检测并滚动至第一个出错的 field，参数同上。

Form.createFormField(options)

Name	Type	Require	Default	Since Ver.	Note
options.component	React Element	yes	input	1.8.12	被包裹的组件，需要提供 value 和 onChange，或相同功能的 API
options.valuePropName	string	No	value	1.8.12	与 value 对应的 prop 名字
options.changePropName	string	No	onChange	1.8.12	与 onChange 对应的 prop 名字
options.processValue	func(value, ...other)	No	-	1.8.12	针对 value（editKey 对应字段）的处理函数
options.renderView	func(value)	No	`val => JSON.stringify(val)`	1.8.12	定制化渲染 view 状态

props

Form

配置项	类型	必填	默认值	功能/备注
className	string	optional	""	加入额外的类名，在使用 kuma 的基础上进行适当的定制时会用得到
jsxprefixCls	string	optional	"kuma-form"	默认类名，用户可以通过修改此项来完成样式的定制
jsxmode	string	optional	"EDIT"	Form 编辑和只读模式，传值方式见 demo
jsxvalues	object	optional	-	传入表单的初始值，格式见 Usage，每一个 key 与 formField 中的 jsxname 相对应，注意是初始值，不要把 onChange 中的变化同步到这里
jsxonChange	function(values, name, pass)	optional	noop	当表单中值有变化时触发，传回 values，格式同 jsxvalues，同时传回发生变化的表单域的 name，以及该表单域是否通过校验
instantValidate	boolean	optional	true	是否开启即时校验
asyncValidate	boolean	optional	false	是否开启异步校验模式，目前仅支持全局配置
verticalAlign	boolean	optional	false	表单域是否竖排
size	string	optional	large	尺寸，支持 large、middle、small

jsxvalues 的格式

{
    jsxname1: value1,
    jsxname2: value2
}

FormRow

配置项	类型	必填	默认值	功能/备注
className	string	optional	""	加入额外的类名，在使用 kuma 的基础上进行适当的定制时会用得到
jsxprefixCls	string	optional	"kuma-form-row"	默认类名，用户可以通过修改此项来完成样式的定制

FormField 通用配置

配置项	类型	必填	默认值	功能/备注
className	string	optional	""	加入额外的类名，在使用 kuma 的基础上进行适当的定制时会用得到
jsxshow	bool	optional	true	是否显示该表单域，不显示的表单域将不占宽度
jsxmode	string	optional	"EDIT"	FormField 的编辑和只读模式，优先级高于 Form，传值方式见 demo
jsxshowLabel	bool	optional	true	是否显示 label
jsxname	string	required	-	表单字段，返回值时该字段将作为 key
jsxlabel	string	required	-	左侧的说明文字，不写即为留白
jsxprefixCls	string	optional	"kuma-form-field"	默认类名，用户可以通过修改此项来完成样式的定制
jsxflex	number	optional	1	占 FormRow 宽的比例，类似于 css3 中的 flex-box
jsxtips	string	optional	""	说明文字
jsxrules	object/array	optional	-	validators，具体用法和格式见 Usage，Form 已经提供了一些现成的 validator 供使用。也可以自己编写
instantValidate	boolean	optional	true	是否开启即时校验
verticalAlign	boolean	optional	false	表单域是否竖排
inputBoxMaxWidth	string	optional	-	泛指的输入框的最大宽度，通常用于较宽页面

Validators

Form 提供了一些通用的 validator，通过 Form.Validators 来引入。用法还是见 Usage 和 demo/formDemo.js 包括：所有的 validator 返回 true，表示通过。 validator 也可以自己定义，会传入相应的表单值，根据判断，返回 true，表示通过。

isNotEmpty
isNum
isInt: 是否是整数
isDecimal: 是否是小数
isArray
isRegExp
isObject
isFunc
isEmail
isUrl
isHex
isIdCard: 是否是中国身份证。
isCNMobile: 是否是中国手机号。

FormField 专属配置

所有的 FormField 都共享通用配置，所有的专属配置在 demo/formDemo.js，均有体现。

InputFormField

配置项	类型	必填	默认值	功能/备注	版本
jsxplaceholder	string	optional	""	占位符	-
jsxdisabled	boolean	optional	false	disable 状态	-
validateOnBlur	boolean	optional	false	验证是否是在 blur 的时候出发，默认情况是在 change 时触发，此项为 true 后，onChange 的 pass 永远为 true，相对应的 onBlur 的 pass 会随之变化	1.2.10
onKeyDown	function(e)	optional	noop	监听键盘事件
onBlur	function(e, pass)	optional	noop	输入框 blur 时触发，第二个参数为验证是否通过，若 validateOnBlur 为 false，则 pass 永远为 true	1.2.10
onFocus	function(e)	optional	noop	输入框获取焦点时触发	1.2.10
renderView	function(value)	optional	noop	自定义渲染 view 状态，参数是默认渲染的值	1.6.0
autoTrim	boolean	optional	-	自动去除值两端的空格	1.2.12
inputType	string	optional	'text'	input 的 type，目前支持 "text" 和 "password"	1.2.23

插件：

Count，通过 InputFormField.Count 取得，一个内置的计数器，用法如下：

<InputFormField>
    <Count total="20">
</InputFormField>

LeftAddon/RightAddon，通过 InputFormField.LeftAddon/InputFormField.RightAddon 取得，给 input 左侧加入自定义的图标或文字，用法如下：

<InputFormField>
    <LeftAddon>
        <i className="kuma-icon kuma-icon-phone"></i>
    </LeftAddon>
    <RightAddon>
        <span>元</span>
    </RightAddon>
</InputFormField>

TextAreaFormField

配置项	类型	必填	默认值	功能/备注
jsxplaceholder	string	optional	""	占位符
validateOnBlur	boolean	optional	false	验证是否是在 blur 的时候出发，默认情况是在 change 时触发，此项为 true 后，onChange 的 pass 永远为 true，相对应的 onBlur 的 pass 会随之变化	1.2.11
onKeyDown	function(e)	optional	noop	监听键盘事件
onBlur	function(e, pass)	optional	noop	输入框 blur 时触发，第二个参数为验证是否通过，若 validateOnBlur 为 false，则 pass 永远为 true	1.2.11
onFocus	function(e)	optional	noop	输入框获取焦点时触发	1.2.11
autoTrim	boolean	optional	-	自动去除值两端的空格	1.2.12
autosize	boolean	optional	true	根据内容自动撑开(IE8 下无效)	1.3.10

配置 autosize 的同时，还可以通过样式指定 min-height 和 max-height

插件：
- Count，通过 TextAreaFormField.TextAreaCount 取得，一个内置的计数器，用法如下：
```
<TextAreaFormField>
 <TextAreaCount total={100}>
</TextAreaFormField>
```

RadioGroupFormField

配置项	类型	必填	默认值	功能/备注
jsxdisabled	boolean	optional	false	disable 状态

Item：通过 RadioGroupFormField.Item 取得，有两个 props
- value
- text：显示的值
使用方式：

<RadioGroupFormField>
    <Item value="1" text="a">
    <Item value="2" text="b">
    <Item value="3" text="c">
</RadioGroupFormField>

SelectFormField

配置项	类型	必填	默认值	功能/备注
jsxdata	object	optional	-	传入用于生成列表的数据，格式为{value: text}
jsxfetchUrl	string	optional	-	如果 Select 是通过搜索异步获取选项，则需要填入此项
jsxstyle	obj	optional	-	与 react 传入 style 的方式相同，修改选择框的样式
beforeFetch	func	optional	-	会传入 {q: value}， value 为搜索框中变化的值，在发出 ajax 请求之前，将数据处理为应该发送的格式，并需返回该数据。
afterFetch	func	optional	-	会传入返回的数据，将其处理为 jsxdata 的格式并返回
dataType	string	optional	'json'	发送 ajax 请求的类型

jsxdata 的格式

jsxdata 目前支持两种格式

// Object
{
    a: "A",
    b: "B"
}
// Array
[
    {
        value: 'a',
        text: 'A'
    }
]

配置 jsxfetchUrl 后，会在组件渲染后立刻以空搜索值发起一次请求，我们强烈建议服务端完善空值搜索的请求处理逻辑，返回热点数据和用户关联数据，以提供更好的选择体验。

此外，SelectFormField 还支持 uxcore-select2 除 onSelect/onDeselect 外的全部属性。

SearchFormField

配置项	类型	必填	默认值	功能/备注
advancedOptions	array	optional	-	右侧高级选项的选择项：格式为`[{value: xxx, text: xxx}]`
advancedConfig	object	optional	-	右侧高级选项的配置，同 `uxcore-select2`
classOptions	array	optional	-	左侧类别选项的选择项：格式为`[{value: xxx, text: xxx}]`
classConfig	object	optional	-	左侧类别选项的配置，同 `uxcore-select2`
tidy	bool	optional	-	精简模式
onIconClick	function(e)	optional	-	点击搜索图标触发回调

该组件继承自 SelectFormField，支持 SelectFormField 的全部 props。

CheckboxGroupFormField

配置项	类型	必填	默认值	功能/备注
jsxdisabled	boolean	optional	false	disable 状态

Item：通过 CheckboxGroupFormField.Item 取的，有两个 props
- value
- text：显示的值
- disabled：该 Item 的 disable 状态。
- addon: 额外指定的信息，例如tips
使用方式：

<CheckboxGroupFormField>
    <Item value="1" text="a" disabled={true} />
    <Item value="2" text="b" />
    <Item value="3" text="c"
        addon={
            <Tooltip overlay={<div>提示</div>}>
                <i className='kuma-icon kuma-icon-caution' style={{color: 'blue', fontSize: '12px', 'marginLeft': '3px'}} />
            </Tooltip>
        }
    />
</CheckboxGroupFormField>

DateFormField

配置项	类型	必填	默认值	功能/备注
jsxtype	string	optional	single	single/cascade 单独、级联
jsxfrom	string	optional	-	开始日期
jsxto	string	optional	-	结束日期
panel	string	optional	"day"	何种面板,枚举值为"month","year"和"day"
autoMatchWidth	boolean	optional	false	从 1.8.11 版本支持，在级联状态下输入框自动匹配宽度

除此之外，支持除 onSelect，uxcore-calendar 的所有 props。

NumberInputFormField

配置项	类型	必填	默认值	功能/备注
jsxplaceholder	string	optional	""	占位符
jsxtype	string	optional	""	目前支持 "money", "cnmobile" 和 "card", 提供三种格式化显示的方法。"money"的格式为`123 121 121.213 121`,"cnmobile"的格式为 `86 1565 7263 8223`, "card" 的格式为 `3321 3123 3243 4343`
fixedNum	number	optional	-	锁定小数位
delimiter	string	optional	' '	分隔符
formatOnBlur	bool	optional	false	在失焦时进行格式化（6.2.0 后支持）

CascadeSelectFormField

配置项	类型	必填	默认值	功能/备注
jsxdata	object	required	-	级联选择框，只支持直接传入 data 初始化，格式见 Usage 中的 casData，length 为必须传的 key，告诉 field 有几层级联。
jsxplaceholder	string	optional	"请下拉选择"	占位符
jsxstyle	object	optional	-	与 react 传入 style 的方式相同，修改选择框的样式
getPopupContainer	function():React Element	optional	-	弹出的菜单渲染在哪个容器中，需返回一个 DOM Node

PickableFormField

配置项	类型	必填	默认值	功能/备注
multiple	boolean	optional	true	是否支持多选
value	string/number	required	-	pickable Item 对应的值
type	string	optional	normal	样式风格，可选值为normal,simple,hook
max	number	optional	99	最大显示的数字，超过 max，显示 max+

EditorFormField

配置项	类型	必填	默认值	功能/备注
placeholder	string	optional	""	占位符
jsxcontent	string	optional	""	已废弃，默认值直接通过 Form 的 jsxvalues 即可传递
jsxconfig	object	optional	{}	用户自定义的配置项，tinyMCE 的配置项，官方文档中所有 init 部分的配置在这里完成，详细见 http://www.tinymce.com/wiki.php/Configuration

API

setContent(content)：设置 EditorFormField 的值，很不幸，EditorFormField 无法做成完全受控的组件，因为 setContent 操作会导致搜狗等中文输入法使用障碍，因此 EditorFormField 的值重置通过这个 API 来完成，或者也可以使用 Form 的 setValues 方法。

OtherFormField

OtherFormField 是一个特殊的 FormField，它用来和其他 FormField 一起完成布局（比如在一行排列等），如果需要一些装饰类的东西，可以以子元素的形式传入到这个 Field 里。他也可以用于布局中的占位。

ButtonGroupFormField

ButtonGroupFormField 是一个特殊的 FormField，它用来生成一些特定的表单按钮，这是为了与 Grid 相结合而准备的。如果需要自定义一些按钮，请使用 OtherFormField 和 uxcore-button 相结合来使用。你可以像这样使用它： `javascript var Button = require('uxcore-button');

{// handleClick 会被传入一个参数 data，取得的值和 API getValues() 相同}