uxcore.js - React UI Component Set

组件演示

[{"title":"表单联动","id":"scene-commonform-demo-basic","tags":[],"filepath":"site/scene/commonForm/demo/basic.md","directory":"scene/commonForm/demo","filename":"basic","meta":{"title":"表单联动","description":"\n","order":"0","filepath":"site/scene/commonForm/demo/basic.md","filename":"basic","directory":"scene/commonForm/demo","id":"scene-commonform-demo-basic","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 Select = _uxcore.Form.SelectFormField,\n Check = _uxcore.Form.CheckboxGroupFormField,\n Validators = _uxcore.Form.Validators,\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 };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleFieldChange',\n value: function handleFieldChange(value, name, pass) {\n var names = ['a', 'b'];\n if (pass && names.indexOf(name) !== -1) {\n var me = this;\n var data = me.refs.form.getValues();\n var values = data.values;\n me.refs.form.setValues({\n total: parseFloat(values.a || 0) + parseFloat(values.b || 0)\n });\n }\n }\n }, {\n key: 'handleClick',\n value: function handleClick() {\n var me = this;\n alert(JSON.stringify(me.refs.form.getValues(true)));\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n\n return React.createElement(\n 'div',\n { className: 'page-demo1' },\n React.createElement(\n _uxcore.Form,\n { jsxonChange: me.handleFieldChange.bind(me), jsxvalues: me.state.values, ref: 'form', instantValidate: false },\n React.createElement(Input, { jsxlabel: 'A', jsxname: 'a', jsxrules: { validator: Validators.isNum, errMsg: '必须为数字' } }),\n React.createElement(Input, { jsxlabel: 'B', jsxname: 'b', jsxrules: { validator: Validators.isNum, errMsg: '必须为数字' } }),\n React.createElement(Input, { jsxlabel: 'A+B', jsxname: 'total' }),\n React.createElement(\n Other,\n { className: 'other' },\n React.createElement(\n _uxcore.Button,\n { onClick: me.handleClick.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('scene-commonform-demo-basic'));\n\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Form } from 'uxcore';\nimport { Button } from 'uxcore';\n\nconst {\n InputFormField: Input,\n SelectFormField: Select,\n CheckboxGroupFormField: Check,\n Validators,\n OtherFormField: Other,\n} = Form;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n values: {},\n };\n }\n\n handleFieldChange(value, name, pass) {\n const names = ['a', 'b'];\n if (pass && names.indexOf(name) !== -1) {\n const me = this;\n const data = me.refs.form.getValues();\n const values = data.values;\n me.refs.form.setValues({\n total: parseFloat(values.a || 0) + parseFloat(values.b || 0),\n });\n }\n }\n\n handleClick() {\n const me = this;\n alert(JSON.stringify(me.refs.form.getValues(true)));\n }\n\n render() {\n const me = this;\n\n return (\n <div className=\"page-demo1\">\n <Form jsxonChange={me.handleFieldChange.bind(me)} jsxvalues={me.state.values} ref=\"form\" instantValidate={false}>\n <Input jsxlabel=\"A\" jsxname=\"a\" jsxrules={{ validator: Validators.isNum, errMsg: '必须为数字' }} />\n <Input jsxlabel=\"B\" jsxname=\"b\" jsxrules={{ validator: Validators.isNum, errMsg: '必须为数字' }} />\n <Input jsxlabel=\"A+B\" jsxname=\"total\" />\n <Other className=\"other\">\n <Button onClick={me.handleClick.bind(me)}>确定</Button>\n </Other>\n </Form>\n </div>\n );\n }\n\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('scene-commonform-demo-basic'));\n\n/* JS END CSS START*/</code></pre></div><style type=\"text/css\">.other {\n padding-left: 100px\n}</style><div class=\"highlight\"><pre><code class=\"css\">.other {\n padding-left: 100px\n}</code></pre></div>"},"status":"public","toc":""},{"title":"表单的扩展1 -- 自定义一个 FormField","id":"scene-commonform-demo-definefield","tags":[],"filepath":"site/scene/commonForm/demo/defineField.md","directory":"scene/commonForm/demo","filename":"defineField","meta":{"title":"表单的扩展1 -- 自定义一个 FormField","description":"\n通过继承 Form.FormField，用户可以自己定义特制的 FormField，以满足各种业务上的需求。 定制的 FormField 同样可以使用 Form 带来通用配置，如布局、样式、校验、值的管理等等。\n","order":"1","filepath":"site/scene/commonForm/demo/defineField.md","filename":"defineField","directory":"scene/commonForm/demo","id":"scene-commonform-demo-definefield","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\nvar _deepcopy = require('deepcopy');\n\nvar _deepcopy2 = _interopRequireDefault(_deepcopy);\n\nvar _objectAssign = require('object-assign');\n\nvar _objectAssign2 = _interopRequireDefault(_objectAssign);\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;\nvar Other = _uxcore.Form.OtherFormField;\n\nvar DoubleInputFormField = function (_FormField) {\n _inherits(DoubleInputFormField, _FormField);\n\n function DoubleInputFormField(props) {\n _classCallCheck(this, DoubleInputFormField);\n\n return _possibleConstructorReturn(this, (DoubleInputFormField.__proto__ || Object.getPrototypeOf(DoubleInputFormField)).call(this, props));\n // 这里不要直接覆盖 this.state = {};\n // 如果希望增加 state，使用扩展。\n // this.state = assign({}, this.state, {xxx: 1})\n }\n\n // 改写 addSpecificClass，增加该 FormField 专属的 class\n\n _createClass(DoubleInputFormField, [{\n key: 'addSpecificClass',\n value: function addSpecificClass() {\n return 'kuma-doubleinput-uxform-field';\n }\n\n // 在合适的时机调用 me.handleDataChange，将变动通知给 Form\n\n }, {\n key: 'handleChange',\n value: function handleChange(index, e) {\n var me = this;\n var value = e.currentTarget.value;\n var stateValue = me.state.value || [];\n stateValue[index] = value;\n me.handleDataChange(stateValue);\n }\n\n // 改写 renderField，决定渲染方式\n\n }, {\n key: 'renderField',\n value: function renderField() {\n var me = this;\n var arr = [];\n // 这里注意取值使用 state.value，完成和 Form 的通信。\n var values = me.state.value || [];\n arr.push(React.createElement('input', { className: 'kuma-input', value: values[0], onChange: me.handleChange.bind(me, 0), key: 'input1' }));\n arr.push(React.createElement(\n 'span',\n { className: 'split', key: 'split' },\n '-'\n ));\n arr.push(React.createElement('input', { className: 'kuma-input', value: values[1], onChange: me.handleChange.bind(me, 1), key: 'input2' }));\n return arr;\n }\n }]);\n\n return DoubleInputFormField;\n}(_uxcore.FormField);\n\nDoubleInputFormField.displayName = 'DoubleInputFormField'; // 重要，必须 displayName 中带有 FormField 才可以被识别为 FormField。\n\n// 如果你的代码需要兼容 IE，以下两行不可缺少。\n// 即使不需要兼容 IE，也不可直接覆盖，如 DoubleInputFormField.defaultProps = {};\nDoubleInputFormField.defaultProps = (0, _objectAssign2.default)({}, _uxcore.FormField.defaultProps);\nDoubleInputFormField.propTypes = (0, _objectAssign2.default)({}, _uxcore.FormField.propTypes);\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this2 = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this2.state = {\n values: {}\n };\n return _this2;\n }\n\n _createClass(Demo, [{\n key: 'handleClick',\n value: function handleClick() {\n var me = this;\n alert(JSON.stringify(me.refs.form.getValues()));\n }\n }, {\n key: 'handleReset',\n value: function handleReset() {\n var me = this;\n me.refs.form.resetValues();\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n\n // FormField 通用的 props 都可以使用。\n return React.createElement(\n 'div',\n { className: 'page-demo2' },\n React.createElement(\n _uxcore.Form,\n { ref: 'form', jsxvalues: {\n double: [2, 4]\n }\n },\n React.createElement(DoubleInputFormField, { jsxlabel: '\\u53CC\\u8F93\\u5165\\u6846', jsxname: 'double' }),\n React.createElement(\n Other,\n { className: 'other' },\n React.createElement(\n _uxcore.Button,\n { onClick: me.handleClick.bind(this) },\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('scene-commonform-demo-definefield'));\n\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Form } from 'uxcore';\nimport { Button } from 'uxcore';\nimport deepcopy from 'deepcopy';;\nimport assign from 'object-assign';;\nimport { FormField } from 'uxcore';\n\nconst {\n OtherFormField: Other,\n} = Form;\n\nclass DoubleInputFormField extends FormField {\n constructor(props) {\n super(props);\n // 这里不要直接覆盖 this.state = {};\n // 如果希望增加 state，使用扩展。\n // this.state = assign({}, this.state, {xxx: 1})\n }\n\n // 改写 addSpecificClass，增加该 FormField 专属的 class\n\n addSpecificClass() {\n return 'kuma-doubleinput-uxform-field';\n }\n\n\n // 在合适的时机调用 me.handleDataChange，将变动通知给 Form\n\n handleChange(index, e) {\n const me = this;\n const value = e.currentTarget.value;\n const stateValue = me.state.value || [];\n stateValue[index] = value;\n me.handleDataChange(stateValue);\n }\n\n // 改写 renderField，决定渲染方式\n\n renderField() {\n const me = this;\n const arr = [];\n // 这里注意取值使用 state.value，完成和 Form 的通信。\n const values = me.state.value || [];\n arr.push(<input className=\"kuma-input\" value={values[0]} onChange={me.handleChange.bind(me, 0)} key=\"input1\" />);\n arr.push(<span className=\"split\" key=\"split\">-</span>);\n arr.push(<input className=\"kuma-input\" value={values[1]} onChange={me.handleChange.bind(me, 1)} key=\"input2\" />);\n return arr;\n }\n\n}\n\nDoubleInputFormField.displayName = 'DoubleInputFormField'; // 重要，必须 displayName 中带有 FormField 才可以被识别为 FormField。\n\n// 如果你的代码需要兼容 IE，以下两行不可缺少。\n// 即使不需要兼容 IE，也不可直接覆盖，如 DoubleInputFormField.defaultProps = {};\nDoubleInputFormField.defaultProps = assign({}, FormField.defaultProps);\nDoubleInputFormField.propTypes = assign({}, FormField.propTypes);\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n values: {},\n };\n }\n\n handleClick() {\n const me = this;\n alert(JSON.stringify(me.refs.form.getValues()));\n }\n\n handleReset() {\n const me = this;\n me.refs.form.resetValues();\n }\n\n render() {\n const me = this;\n\n // FormField 通用的 props 都可以使用。\n return (\n <div className=\"page-demo2\">\n <Form ref=\"form\" jsxvalues={{\n double: [2, 4],\n }}\n >\n <DoubleInputFormField jsxlabel=\"双输入框\" jsxname=\"double\" />\n <Other className=\"other\">\n <Button onClick={me.handleClick.bind(this)}>确定</Button>\n </Other>\n </Form>\n </div>\n );\n }\n\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('scene-commonform-demo-definefield'));\n\n/* JS END CSS START*/</code></pre></div><style type=\"text/css\">.page-demo2 .other {\n padding-left: 100px\n}\n.page-demo2 .kuma-doubleinput-uxform-field .kuma-input {\n width: 200px\n}\n.page-demo2 .kuma-doubleinput-uxform-field .split {\n margin: 0 5px;\n}\n.page-demo2 .kuma-button {\n margin-right: 10px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.page-demo2 .other {\n padding-left: 100px\n}\n.page-demo2 .kuma-doubleinput-uxform-field .kuma-input {\n width: 200px\n}\n.page-demo2 .kuma-doubleinput-uxform-field .split {\n margin: 0 5px;\n}\n.page-demo2 .kuma-button {\n margin-right: 10px;\n}</code></pre></div>"},"status":"public","toc":""},{"title":"表单的扩展2 -- 使用 API 自定义一个 FormField","id":"scene-commonform-demo-definefieldapi","tags":[],"filepath":"site/scene/commonForm/demo/defineFieldApi.md","directory":"scene/commonForm/demo","filename":"defineFieldApi","meta":{"title":"表单的扩展2 -- 使用 API 自定义一个 FormField","description":"\n通过继承 Form.createFormField API，用户可以快速地将自己的业务组件封装成 FormField，以满足各种业务上的需求。 定制的 FormField 同样可以使用 Form 带来通用配置，如布局、样式、校验、值的管理等等。 可以与上面的例子进行一个对比，感受一下之间的不同性，这种方式没有扩展 FormField 的方式定制，但相比较起来封装更加简单。\n","order":"2","filepath":"site/scene/commonForm/demo/defineFieldApi.md","filename":"defineFieldApi","directory":"scene/commonForm/demo","id":"scene-commonform-demo-definefieldapi","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 Other = _uxcore.Form.OtherFormField;\n\n// 组件拥有 prop `value` 和 `onChange`\n// 当然也可以不叫 `value` 和 `onChange`，只需要根据文档，传入对应的 prop 名即可。\n\nvar DoubleInput = function (_React$Component) {\n _inherits(DoubleInput, _React$Component);\n\n function DoubleInput() {\n _classCallCheck(this, DoubleInput);\n\n return _possibleConstructorReturn(this, (DoubleInput.__proto__ || Object.getPrototypeOf(DoubleInput)).apply(this, arguments));\n }\n\n _createClass(DoubleInput, [{\n key: 'handleChange',\n value: function handleChange(index, e) {\n var me = this;\n var value = e.currentTarget.value;\n var stateValue = (me.props.value || []).slice(0);\n stateValue[index] = value;\n me.props.onChange(stateValue);\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n var arr = [];\n var values = me.props.value || [];\n arr.push(React.createElement('input', { className: 'kuma-input', value: values[0], onChange: me.handleChange.bind(me, 0), key: 'input1' }));\n arr.push(React.createElement(\n 'span',\n { className: 'split', key: 'split' },\n '-'\n ));\n arr.push(React.createElement('input', { className: 'kuma-input', value: values[1], onChange: me.handleChange.bind(me, 1), key: 'input2' }));\n return React.createElement(\n 'div',\n null,\n arr\n );\n }\n }]);\n\n return DoubleInput;\n}(React.Component);\n\nvar DoubleInputFormField = _uxcore.Form.createFormField({\n component: React.createElement(DoubleInput, null),\n fieldName: 'DoubleInputFormField'\n});\n\nvar Demo = function (_React$Component2) {\n _inherits(Demo, _React$Component2);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this2 = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this2.state = {\n values: {}\n };\n return _this2;\n }\n\n _createClass(Demo, [{\n key: 'handleClick',\n value: function handleClick() {\n var me = this;\n alert(JSON.stringify(me.refs.form.getValues()));\n }\n }, {\n key: 'handleReset',\n value: function handleReset() {\n var me = this;\n me.refs.form.resetValues();\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n\n // FormField 通用的 props 都可以使用。\n return React.createElement(\n 'div',\n { className: 'page-demo3' },\n React.createElement(\n _uxcore.Form,\n { ref: 'form', jsxvalues: {\n double: [2, 4]\n }\n },\n React.createElement(DoubleInputFormField, { jsxlabel: '\\u53CC\\u8F93\\u5165\\u6846', jsxname: 'double', className: 'kuma-doubleinput-uxform-field' }),\n React.createElement(\n Other,\n { className: 'other' },\n React.createElement(\n _uxcore.Button,\n { onClick: me.handleClick.bind(this) },\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('scene-commonform-demo-definefieldapi'));\n\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Form } from 'uxcore';\nimport { Button } from 'uxcore';\n\nconst {\n OtherFormField: Other,\n} = Form;\n\n// 组件拥有 prop `value` 和 `onChange`\n// 当然也可以不叫 `value` 和 `onChange`，只需要根据文档，传入对应的 prop 名即可。\n\nclass DoubleInput extends React.Component {\n handleChange(index, e) {\n const me = this;\n const value = e.currentTarget.value;\n const stateValue = (me.props.value || []).slice(0);\n stateValue[index] = value;\n me.props.onChange(stateValue);\n }\n render() {\n const me = this;\n const arr = [];\n const values = me.props.value || [];\n arr.push(<input className=\"kuma-input\" value={values[0]} onChange={me.handleChange.bind(me, 0)} key=\"input1\" />);\n arr.push(<span className=\"split\" key=\"split\">-</span>);\n arr.push(<input className=\"kuma-input\" value={values[1]} onChange={me.handleChange.bind(me, 1)} key=\"input2\" />);\n return (\n <div>{arr}</div>\n );\n }\n}\n\nconst DoubleInputFormField = Form.createFormField({\n component: <DoubleInput />,\n fieldName: 'DoubleInputFormField',\n});\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n values: {},\n };\n }\n\n handleClick() {\n const me = this;\n alert(JSON.stringify(me.refs.form.getValues()));\n }\n\n handleReset() {\n const me = this;\n me.refs.form.resetValues();\n }\n\n render() {\n const me = this;\n\n // FormField 通用的 props 都可以使用。\n return (\n <div className=\"page-demo3\">\n <Form ref=\"form\" jsxvalues={{\n double: [2, 4],\n }}\n >\n <DoubleInputFormField jsxlabel=\"双输入框\" jsxname=\"double\" className=\"kuma-doubleinput-uxform-field\" />\n <Other className=\"other\">\n <Button onClick={me.handleClick.bind(this)}>确定</Button>\n </Other>\n </Form>\n </div>\n );\n }\n\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('scene-commonform-demo-definefieldapi'));\n\n/* JS END CSS START*/</code></pre></div><style type=\"text/css\">.page-demo3 .other {\n padding-left: 100px\n}\n.page-demo3 .kuma-doubleinput-uxform-field .kuma-input {\n width: 200px\n}\n.page-demo3 .kuma-doubleinput-uxform-field .split {\n margin: 0 5px;\n}\n.page-demo3 .kuma-button {\n margin-right: 10px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.page-demo3 .other {\n padding-left: 100px\n}\n.page-demo3 .kuma-doubleinput-uxform-field .kuma-input {\n width: 200px\n}\n.page-demo3 .kuma-doubleinput-uxform-field .split {\n margin: 0 5px;\n}\n.page-demo3 .kuma-button {\n margin-right: 10px;\n}</code></pre></div>"},"status":"public","toc":""},{"title":"表单的扩展3 -- 一些表单装饰物的使用","id":"scene-commonform-demo-decoration","tags":[],"filepath":"site/scene/commonForm/demo/decoration.md","directory":"scene/commonForm/demo","filename":"decoration","meta":{"title":"表单的扩展3 -- 一些表单装饰物的使用","description":"\n在表单中，一些不需要表单交互的模块，我们称之为装饰物，例如按钮、观看用的表格等等， 这个场景演示了如何在 Form 中自定义地定义装饰物的。\n","order":"3","filepath":"site/scene/commonForm/demo/decoration.md","filename":"decoration","directory":"scene/commonForm/demo","id":"scene-commonform-demo-decoration","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 FormRow = _uxcore.Form.FormRow,\n Validators = _uxcore.Form.Validators,\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 };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleClick',\n value: function handleClick() {\n var me = this;\n alert(JSON.stringify(me.form.getValues(true)));\n }\n }, {\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n var me = this;\n var tableProps = {\n width: 700,\n jsxdata: {\n data: [{\n name: '小王',\n pinyin: 'xiaowang'\n }, {\n name: '小李',\n pinyin: 'xiaoli'\n }]\n },\n jsxcolumns: [{ dataKey: 'name', title: '姓名', width: 300 }, { dataKey: 'pinyin', title: '拼音', width: 300 }]\n };\n return React.createElement(\n 'div',\n { className: 'page-demo3' },\n React.createElement(\n _uxcore.Form,\n { jsxvalues: me.state.values, ref: function ref(c) {\n _this2.form = c;\n } },\n React.createElement(\n FormRow,\n null,\n React.createElement(Input, { jsxlabel: 'A', jsxname: 'a', jsxrules: { validator: Validators.isNum, errMsg: '必须为数字' } }),\n React.createElement(\n Other,\n null,\n React.createElement(\n 'span',\n { className: 'yuan' },\n '\\u5143'\n )\n )\n ),\n React.createElement(\n Other,\n { className: 'other' },\n React.createElement(_uxcore.Table, tableProps),\n React.createElement(\n _uxcore.Button,\n { onClick: me.handleClick.bind(me), className: 'confirmButton' },\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('scene-commonform-demo-decoration'));\n\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Form } from 'uxcore';\nimport { Button } from 'uxcore';\nimport { Table } from 'uxcore';\n\nconst {\n InputFormField: Input,\n FormRow,\n Validators,\n OtherFormField: Other,\n} = Form;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n values: {},\n };\n }\n\n handleClick() {\n const me = this;\n alert(JSON.stringify(me.form.getValues(true)));\n }\n\n render() {\n const me = this;\n const tableProps = {\n width: 700,\n jsxdata: {\n data: [\n {\n name: '小王',\n pinyin: 'xiaowang',\n },\n {\n name: '小李',\n pinyin: 'xiaoli',\n },\n ],\n },\n jsxcolumns: [\n { dataKey: 'name', title: '姓名', width: 300 },\n { dataKey: 'pinyin', title: '拼音', width: 300 },\n ],\n };\n return (\n <div className=\"page-demo3\">\n <Form jsxvalues={me.state.values} ref={(c) => {this.form = c;}}>\n <FormRow>\n <Input jsxlabel=\"A\" jsxname=\"a\" jsxrules={{ validator: Validators.isNum, errMsg: '必须为数字' }} />\n <Other>\n <span className=\"yuan\">元</span>\n </Other>\n </FormRow>\n <Other className=\"other\">\n <Table {...tableProps} />\n <Button onClick={me.handleClick.bind(me)} className=\"confirmButton\">确定</Button>\n </Other>\n </Form>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('scene-commonform-demo-decoration'));\n\n/* JS END CSS START*/</code></pre></div><style type=\"text/css\">.page-demo3 .other {\n padding-left: 88px\n}\n\n.page-demo3 .confirmButton {\n margin-top: 10px;\n}\n\n.page-demo3 .yuan {\n line-height: 34px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.page-demo3 .other {\n padding-left: 88px\n}\n\n.page-demo3 .confirmButton {\n margin-top: 10px;\n}\n\n.page-demo3 .yuan {\n line-height: 34px;\n}</code></pre></div>"},"status":"public","toc":""}]

表单联动


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

const {
    InputFormField: Input,
    SelectFormField: Select,
    CheckboxGroupFormField: Check,
    Validators,
    OtherFormField: Other,
} = Form;

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

  handleFieldChange(value, name, pass) {
    const names = ['a', 'b'];
    if (pass && names.indexOf(name) !== -1) {
      const me = this;
      const data = me.refs.form.getValues();
      const values = data.values;
      me.refs.form.setValues({
        total: parseFloat(values.a || 0) + parseFloat(values.b || 0),
      });
    }
  }

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

  render() {
    const me = this;

    return (
      <div className="page-demo1">
        <Form jsxonChange={me.handleFieldChange.bind(me)} jsxvalues={me.state.values} ref="form" instantValidate={false}>
          <Input jsxlabel="A" jsxname="a" jsxrules={{ validator: Validators.isNum, errMsg: '必须为数字' }} />
          <Input jsxlabel="B" jsxname="b" jsxrules={{ validator: Validators.isNum, errMsg: '必须为数字' }} />
          <Input jsxlabel="A+B" jsxname="total" />
          <Other className="other">
            <Button onClick={me.handleClick.bind(me)}>确定</Button>
          </Other>
        </Form>
      </div>
    );
  }

}

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

/* JS END CSS START*/

.other {
    padding-left: 100px
}

表单的扩展1 -- 自定义一个 FormField

通过继承 Form.FormField，用户可以自己定义特制的 FormField，以满足各种业务上的需求。
定制的 FormField 同样可以使用 Form 带来通用配置，如布局、样式、校验、值的管理等等。


import { Form } from 'uxcore';
import { Button } from 'uxcore';
import deepcopy from 'deepcopy';;
import assign from 'object-assign';;
import { FormField } from 'uxcore';

const {
    OtherFormField: Other,
} = Form;

class DoubleInputFormField extends FormField {
  constructor(props) {
    super(props);
        // 这里不要直接覆盖 this.state = {};
        // 如果希望增加 state，使用扩展。
        // this.state = assign({}, this.state, {xxx: 1})
  }

    // 改写 addSpecificClass，增加该 FormField 专属的 class

  addSpecificClass() {
    return 'kuma-doubleinput-uxform-field';
  }


    // 在合适的时机调用 me.handleDataChange，将变动通知给 Form

  handleChange(index, e) {
    const me = this;
    const value = e.currentTarget.value;
    const stateValue = me.state.value || [];
    stateValue[index] = value;
    me.handleDataChange(stateValue);
  }

    // 改写 renderField，决定渲染方式

  renderField() {
    const me = this;
    const arr = [];
        // 这里注意取值使用 state.value，完成和 Form 的通信。
    const values = me.state.value || [];
    arr.push(<input className="kuma-input" value={values[0]} onChange={me.handleChange.bind(me, 0)} key="input1" />);
    arr.push(<span className="split" key="split">-</span>);
    arr.push(<input className="kuma-input" value={values[1]} onChange={me.handleChange.bind(me, 1)} key="input2" />);
    return arr;
  }

}

DoubleInputFormField.displayName = 'DoubleInputFormField'; // 重要，必须 displayName 中带有 FormField 才可以被识别为 FormField。

// 如果你的代码需要兼容 IE，以下两行不可缺少。
// 即使不需要兼容 IE，也不可直接覆盖，如 DoubleInputFormField.defaultProps = {};
DoubleInputFormField.defaultProps = assign({}, FormField.defaultProps);
DoubleInputFormField.propTypes = assign({}, FormField.propTypes);

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

  handleClick() {
    const me = this;
    alert(JSON.stringify(me.refs.form.getValues()));
  }

  handleReset() {
    const me = this;
    me.refs.form.resetValues();
  }

  render() {
    const me = this;

        // FormField 通用的 props 都可以使用。
    return (
      <div className="page-demo2">
        <Form ref="form" jsxvalues={{
          double: [2, 4],
        }}
        >
          <DoubleInputFormField jsxlabel="双输入框" jsxname="double" />
          <Other className="other">
            <Button onClick={me.handleClick.bind(this)}>确定</Button>
          </Other>
        </Form>
      </div>
    );
  }

}

ReactDOM.render(
  <Demo />
, document.getElementById('scene-commonform-demo-definefield'));

/* JS END CSS START*/

.page-demo2 .other {
    padding-left: 100px
}
.page-demo2 .kuma-doubleinput-uxform-field .kuma-input {
    width: 200px
}
.page-demo2 .kuma-doubleinput-uxform-field .split {
    margin: 0 5px;
}
.page-demo2 .kuma-button {
    margin-right: 10px;
}

表单的扩展2 -- 使用 API 自定义一个 FormField

通过继承 Form.createFormField API，用户可以快速地将自己的业务组件封装成 FormField，以满足各种业务上的需求。
定制的 FormField 同样可以使用 Form 带来通用配置，如布局、样式、校验、值的管理等等。
可以与上面的例子进行一个对比，感受一下之间的不同性，这种方式没有扩展 FormField 的方式定制，但相比较起来封装更加简单。


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

const {
    OtherFormField: Other,
} = Form;

// 组件拥有 prop `value` 和 `onChange`
// 当然也可以不叫 `value` 和 `onChange`，只需要根据文档，传入对应的 prop 名即可。

class DoubleInput extends React.Component {
  handleChange(index, e) {
    const me = this;
    const value = e.currentTarget.value;
    const stateValue = (me.props.value || []).slice(0);
    stateValue[index] = value;
    me.props.onChange(stateValue);
  }
  render() {
    const me = this;
    const arr = [];
    const values = me.props.value || [];
    arr.push(<input className="kuma-input" value={values[0]} onChange={me.handleChange.bind(me, 0)} key="input1" />);
    arr.push(<span className="split" key="split">-</span>);
    arr.push(<input className="kuma-input" value={values[1]} onChange={me.handleChange.bind(me, 1)} key="input2" />);
    return (
      <div>{arr}</div>
    );
  }
}

const DoubleInputFormField = Form.createFormField({
  component: <DoubleInput />,
  fieldName: 'DoubleInputFormField',
});

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

  handleClick() {
    const me = this;
    alert(JSON.stringify(me.refs.form.getValues()));
  }

  handleReset() {
    const me = this;
    me.refs.form.resetValues();
  }

  render() {
    const me = this;

        // FormField 通用的 props 都可以使用。
    return (
      <div className="page-demo3">
        <Form ref="form" jsxvalues={{
          double: [2, 4],
        }}
        >
          <DoubleInputFormField jsxlabel="双输入框" jsxname="double" className="kuma-doubleinput-uxform-field" />
          <Other className="other">
            <Button onClick={me.handleClick.bind(this)}>确定</Button>
          </Other>
        </Form>
      </div>
    );
  }

}

ReactDOM.render(
  <Demo />
, document.getElementById('scene-commonform-demo-definefieldapi'));

/* JS END CSS START*/

.page-demo3 .other {
    padding-left: 100px
}
.page-demo3 .kuma-doubleinput-uxform-field .kuma-input {
    width: 200px
}
.page-demo3 .kuma-doubleinput-uxform-field .split {
    margin: 0 5px;
}
.page-demo3 .kuma-button {
    margin-right: 10px;
}

表单的扩展3 -- 一些表单装饰物的使用

在表单中，一些不需要表单交互的模块，我们称之为装饰物，例如按钮、观看用的表格等等，
这个场景演示了如何在 Form 中自定义地定义装饰物的。


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

const {
  InputFormField: Input,
  FormRow,
  Validators,
  OtherFormField: Other,
} = Form;

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

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

  render() {
    const me = this;
    const tableProps = {
      width: 700,
      jsxdata: {
        data: [
          {
            name: '小王',
            pinyin: 'xiaowang',
          },
          {
            name: '小李',
            pinyin: 'xiaoli',
          },
        ],
      },
      jsxcolumns: [
        { dataKey: 'name', title: '姓名', width: 300 },
        { dataKey: 'pinyin', title: '拼音', width: 300 },
      ],
    };
    return (
      <div className="page-demo3">
        <Form jsxvalues={me.state.values} ref={(c) => {this.form = c;}}>
          <FormRow>
            <Input jsxlabel="A" jsxname="a" jsxrules={{ validator: Validators.isNum, errMsg: '必须为数字' }} />
            <Other>
              <span className="yuan">元</span>
            </Other>
          </FormRow>
          <Other className="other">
            <Table {...tableProps} />
            <Button onClick={me.handleClick.bind(me)} className="confirmButton">确定</Button>
          </Other>
        </Form>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('scene-commonform-demo-decoration'));

/* JS END CSS START*/

.page-demo3 .other {
    padding-left: 88px
}

.page-demo3 .confirmButton {
    margin-top: 10px;
}

.page-demo3 .yuan {
    line-height: 34px;
}