Skip to content

Commit

Permalink
feat(bee-form-control): 支持onBlur
Browse files Browse the repository at this point in the history 
支持onBlur事件
  • Loading branch information
BoyuZhou committed Jun 22, 2018
1 parent b4c8089 commit 7b7c4c8
Show file tree
Hide file tree
Showing 7 changed files with 68 additions and 15 deletions.
21 changes: 18 additions & 3 deletions build/FormControl.js
View file
Expand Up @@ -39,7 +39,8 @@ var propTypes = {
type: _propTypes2["default"].string,
size: _propTypes2["default"].oneOf(['sm', 'md', 'lg']),
onSearch: _propTypes2["default"].func,
onChange: _propTypes2["default"].func
onChange: _propTypes2["default"].func,
onBlur: _propTypes2["default"].func
};

var defaultProps = {
Expand Down Expand Up @@ -103,6 +104,16 @@ var FormControl = function (_React$Component) {
}
};

_this.handleBlur = function (e) {
var value = _this.state.value;
var onBlur = _this.props.onBlur;


if (onBlur) {
onBlur(value, e);
}
};

_this.renderInput = function () {
var _this$props2 = _this.props,
Component = _this$props2.componentClass,
Expand All @@ -113,7 +124,8 @@ var FormControl = function (_React$Component) {
value = _this$props2.value,
onChange = _this$props2.onChange,
onSearch = _this$props2.onSearch,
others = _objectWithoutProperties(_this$props2, ['componentClass', 'type', 'className', 'size', 'clsPrefix', 'value', 'onChange', 'onSearch']);
onBlur = _this$props2.onBlur,
others = _objectWithoutProperties(_this$props2, ['componentClass', 'type', 'className', 'size', 'clsPrefix', 'value', 'onChange', 'onSearch', 'onBlur']);
// input[type="file"] 不应该有类名 .form-control.


Expand All @@ -134,6 +146,7 @@ var FormControl = function (_React$Component) {
},
value: value,
onChange: _this.handleChange,
onBlur: _this.handleBlur,
className: (0, _classnames2["default"])(className, classNames)
}));
};
Expand All @@ -148,7 +161,8 @@ var FormControl = function (_React$Component) {
value = _this$props3.value,
onChange = _this$props3.onChange,
onSearch = _this$props3.onSearch,
others = _objectWithoutProperties(_this$props3, ['componentClass', 'type', 'className', 'size', 'clsPrefix', 'value', 'onChange', 'onSearch']);
onBlur = _this$props3.onBlur,
others = _objectWithoutProperties(_this$props3, ['componentClass', 'type', 'className', 'size', 'clsPrefix', 'value', 'onChange', 'onSearch', 'onBlur']);
// input[type="file"] 不应该有类名 .form-control.


Expand All @@ -170,6 +184,7 @@ var FormControl = function (_React$Component) {
onChange: _this.handleSearchChange,
value: value,
onKeyDown: _this.handleKeyDown,
onBlur: _this.handleBlur,
className: (0, _classnames2["default"])(className, clsPrefix, classes)
})),
_react2["default"].createElement(
Expand Down
8 changes: 6 additions & 2 deletions demo/demolist/Demo1.js
View file
Expand Up @@ -15,8 +15,11 @@ export default class Demo1 extends Component {
}
}

onChange = (e) => {
this.setState({value: e});
onChange = (v) => {
this.setState({value: v});
}
onBlur = (v) => {
console.log(v);
}

render() {
Expand All @@ -26,6 +29,7 @@ export default class Demo1 extends Component {
className="demo1-input"
value={this.state.value}
onChange={this.onChange}
onBlur={this.onBlur}
size="sm"
/>
<FormControl
Expand Down
2 changes: 1 addition & 1 deletion demo/index.js
View file
Expand Up @@ -11,7 +11,7 @@ const CARET = <i className="uf uf-arrow-down"></i>;
const CARETUP = <i className="uf uf-arrow-up"></i>;


var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var DemoArray = [{"example":<Demo1 />,"title":" 不同size Input","code":"/**\n * @title 不同size Input\n * @description\n */\n\nimport React, {Component} from 'react';\nimport { FormControl, Button } from 'tinper-bee';\n\n\n constructor(props) {\n super(props);\n this.state = {\n value: \"test\"\n }\n }\n\n onChange = (e) => {\n this.setState({value: e});\n }\n\n render() {\n return (\n <div className=\"demo1\">\n <FormControl\n className=\"demo1-input\"\n value={this.state.value}\n onChange={this.onChange}\n size=\"sm\"\n />\n <FormControl\n className=\"demo1-input\"\n value={this.state.value}\n onChange={this.onChange}\n />\n <FormControl\n className=\"demo1-input\"\n value={this.state.value}\n onChange={this.onChange}\n size=\"lg\"\n />\n </div>\n\n )\n }\n}","desc":"","scss_code":".demo1 {\n padding-bottom: 20px;\n display: block;\n .demo1-input{\n margin-top: 10px;\n width: 200px;\n display: block;\n }\n}"},{"example":<Demo2 />,"title":" 可控 Input","code":"/**\n * @title 可控 Input\n * @description\n */\n\nimport React, {Component} from 'react';\nimport { FormControl, Button } from 'tinper-bee';\n\n\n constructor(props) {\n super(props);\n this.state = {\n value: \"我是这样\"\n }\n }\n\n onChange = (value) => {\n this.setState({value: value});\n }\n\n onHander = () => {\n this.setState({value: \"我改变了\"})\n }\n\n render() {\n return (\n <div className=\"demo2\">\n <Button colors=\"primary\" onClick={this.onHander}>修改输入框值</Button>\n <FormControl className=\"demo2-input\" value={this.state.value} onChange={this.onChange}/>\n </div>\n\n )\n }\n}","desc":"","scss_code":".demo2 {\n padding-bottom: 20px;\n display: block;\n .demo2-input{\n margin-top: 10px;\n width: 200px;\n display: block;\n }\n}"},{"example":<Demo3 />,"title":" 获取Input对象句柄","code":"/**\n * @title 获取Input对象句柄\n * @description 获取对象句柄，两种方式。\n */\n\nimport React, {Component} from 'react';\nimport { FormControl, Button } from 'tinper-bee';\n\nclass Demo3 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n value: \"test\"\n }\n }\n\n onHander = () => {\n this.textInput.input.focus();\n }\n\n render() {\n return (\n <div className=\"demo3\">\n <Button colors=\"primary\" onClick={this.onHander}>获取input对象句柄</Button>\n\n <FormControl\n className=\"demo3-input\"\n value={this.state.value}\n ref={(input) => {this.textInput = input}}\n />\n <FormControl\n className=\"demo3-input\"\n value={this.state.value}\n ref=\"test\"\n />\n </div>\n\n )\n }\n}\n","desc":" 获取对象句柄，两种方式。","scss_code":".demo3 {\n padding-bottom: 20px;\n display: block;\n .demo3-input{\n margin-top: 10px;\n width: 200px;\n display: block;\n }\n}"},{"example":<Demo4 />,"title":" 设置文本框焦点事件 autoFocus 属性","code":"/**\n * @title 设置文本框焦点事件 autoFocus 属性\n * @description 设置文本框焦点事件 autoFocus 属性\n */\n\nimport React, {Component} from 'react';\nimport { FormControl, Button } from 'tinper-bee';\n\nclass Demo4 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n value: \"test\"\n }\n }\n\n render() {\n return (\n <div className=\"demo4\">\n <FormControl\n className=\"demo4-input\"\n autoFocus\n value={this.state.value}\n />\n </div>\n )\n }\n}\n","desc":" 设置文本框焦点事件 autoFocus 属性","scss_code":".demo4 {\n padding-bottom: 20px;\n display: block;\n .demo4-input{\n margin-top: 10px;\n width: 200px;\n display: block;\n }\n}"},{"example":<Demo5 />,"title":" 搜索框","code":"/**\n * @title 搜索框\n * @description 通过设置type=\"search\"属性，让FormControl组件有搜索功能\n */\n\nimport React, {Component} from 'react';\nimport { FormControl, Button } from 'tinper-bee';\n\n\n constructor(props) {\n super(props);\n this.state = {\n value: \"test\"\n }\n }\n\n onChange = (value) => {\n this.setState({value: value});\n }\n\n onSearch = (value) => {\n console.log(\"搜索\" + value);\n }\n\n render() {\n return (\n <div className=\"demo5\">\n <FormControl\n className=\"demo5-input\"\n value={this.state.value}\n onSearch={this.onSearch}\n onChange={this.onChange}\n type=\"search\"\n />\n </div>\n\n )\n }\n}","desc":" 通过设置type=\"search\"属性，让FormControl组件有搜索功能","scss_code":".demo5 {\n padding-bottom: 20px;\n display: block;\n .demo5-input{\n margin-top: 10px;\n width: 200px;\n display: block;\n }\n}"}]
var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var DemoArray = [{"example":<Demo1 />,"title":" 不同size Input","code":"/**\n * @title 不同size Input\n * @description\n */\n\nimport React, {Component} from 'react';\nimport { FormControl, Button } from 'tinper-bee';\n\n\n constructor(props) {\n super(props);\n this.state = {\n value: \"test\"\n }\n }\n\n onChange = (v) => {\n this.setState({value: v});\n }\n onBlur = (v) => {\n console.log(v);\n }\n\n render() {\n return (\n <div className=\"demo1\">\n <FormControl\n className=\"demo1-input\"\n value={this.state.value}\n onChange={this.onChange}\n onBlur={this.onBlur}\n size=\"sm\"\n />\n <FormControl\n className=\"demo1-input\"\n value={this.state.value}\n onChange={this.onChange}\n />\n <FormControl\n className=\"demo1-input\"\n value={this.state.value}\n onChange={this.onChange}\n size=\"lg\"\n />\n </div>\n\n )\n }\n}","desc":"","scss_code":".demo1 {\n padding-bottom: 20px;\n display: block;\n .demo1-input{\n margin-top: 10px;\n width: 200px;\n display: block;\n }\n}"},{"example":<Demo2 />,"title":" 可控 Input","code":"/**\n * @title 可控 Input\n * @description\n */\n\nimport React, {Component} from 'react';\nimport { FormControl, Button } from 'tinper-bee';\n\n\n constructor(props) {\n super(props);\n this.state = {\n value: \"我是这样\"\n }\n }\n\n onChange = (value) => {\n this.setState({value: value});\n }\n\n onHander = () => {\n this.setState({value: \"我改变了\"})\n }\n\n render() {\n return (\n <div className=\"demo2\">\n <Button colors=\"primary\" onClick={this.onHander}>修改输入框值</Button>\n <FormControl className=\"demo2-input\" value={this.state.value} onChange={this.onChange}/>\n </div>\n\n )\n }\n}","desc":"","scss_code":".demo2 {\n padding-bottom: 20px;\n display: block;\n .demo2-input{\n margin-top: 10px;\n width: 200px;\n display: block;\n }\n}"},{"example":<Demo3 />,"title":" 获取Input对象句柄","code":"/**\n * @title 获取Input对象句柄\n * @description 获取对象句柄，两种方式。\n */\n\nimport React, {Component} from 'react';\nimport { FormControl, Button } from 'tinper-bee';\n\nclass Demo3 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n value: \"test\"\n }\n }\n\n onHander = () => {\n this.textInput.input.focus();\n }\n\n render() {\n return (\n <div className=\"demo3\">\n <Button colors=\"primary\" onClick={this.onHander}>获取input对象句柄</Button>\n\n <FormControl\n className=\"demo3-input\"\n value={this.state.value}\n ref={(input) => {this.textInput = input}}\n />\n <FormControl\n className=\"demo3-input\"\n value={this.state.value}\n ref=\"test\"\n />\n </div>\n\n )\n }\n}\n","desc":" 获取对象句柄，两种方式。","scss_code":".demo3 {\n padding-bottom: 20px;\n display: block;\n .demo3-input{\n margin-top: 10px;\n width: 200px;\n display: block;\n }\n}"},{"example":<Demo4 />,"title":" 设置文本框焦点事件 autoFocus 属性","code":"/**\n * @title 设置文本框焦点事件 autoFocus 属性\n * @description 设置文本框焦点事件 autoFocus 属性\n */\n\nimport React, {Component} from 'react';\nimport { FormControl, Button } from 'tinper-bee';\n\nclass Demo4 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n value: \"test\"\n }\n }\n\n render() {\n return (\n <div className=\"demo4\">\n <FormControl\n className=\"demo4-input\"\n autoFocus\n value={this.state.value}\n />\n </div>\n )\n }\n}\n","desc":" 设置文本框焦点事件 autoFocus 属性","scss_code":".demo4 {\n padding-bottom: 20px;\n display: block;\n .demo4-input{\n margin-top: 10px;\n width: 200px;\n display: block;\n }\n}"},{"example":<Demo5 />,"title":" 搜索框","code":"/**\n * @title 搜索框\n * @description 通过设置type=\"search\"属性，让FormControl组件有搜索功能\n */\n\nimport React, {Component} from 'react';\nimport { FormControl, Button } from 'tinper-bee';\n\n\n constructor(props) {\n super(props);\n this.state = {\n value: \"test\"\n }\n }\n\n onChange = (value) => {\n this.setState({value: value});\n }\n\n onSearch = (value) => {\n console.log(\"搜索\" + value);\n }\n\n render() {\n return (\n <div className=\"demo5\">\n <FormControl\n className=\"demo5-input\"\n value={this.state.value}\n onSearch={this.onSearch}\n onChange={this.onChange}\n type=\"search\"\n />\n </div>\n\n )\n }\n}","desc":" 通过设置type=\"search\"属性，让FormControl组件有搜索功能","scss_code":".demo5 {\n padding-bottom: 20px;\n display: block;\n .demo5-input{\n margin-top: 10px;\n width: 200px;\n display: block;\n }\n}"}]


class Demo extends Component {
Expand Down

0 comments on commit 7b7c4c8

Please sign in to comment.