Created
January 14, 2016 09:52
-
-
Save anonymous/7800fa6c1ed46e794ce5 to your computer and use it in GitHub Desktop.
React // source http://react.jsbin.com/domolusuyi
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>React</title> | |
| <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css"> | |
| <script src="http://fb.me/react-with-addons-0.14.3.js"></script> | |
| <script src="http://fb.me/react-dom-0.14.3.js"></script> | |
| <style id="jsbin-css"> | |
| body { | |
| margin: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"></div> | |
| <script id="jsbin-javascript"> | |
| //Create React component which validates entered email address in input field. While user is entering email address (on each key press) component updates the message below the input field which shows the result of validation. | |
| "use strict"; | |
| var _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; }; })(); | |
| var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; | |
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
| function _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; } | |
| var mountNode = document.getElementById("container"); | |
| // Containers | |
| var Application = (function (_React$Component) { | |
| _inherits(Application, _React$Component); | |
| function Application() { | |
| _classCallCheck(this, Application); | |
| _get(Object.getPrototypeOf(Application.prototype), "constructor", this).call(this); | |
| this.state = { | |
| error: false | |
| }; | |
| this.emailPattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; | |
| this.onChange = this.onChange.bind(this); | |
| this.validate = this.validate.bind(this); | |
| } | |
| // Components | |
| _createClass(Application, [{ | |
| key: "validate", | |
| value: function validate(val) { | |
| this.setState({ error: !this.emailPattern.test(val) }); | |
| } | |
| }, { | |
| key: "onChange", | |
| value: function onChange(val) { | |
| this.validate(val); | |
| this.setState; | |
| } | |
| }, { | |
| key: "render", | |
| value: function render() { | |
| var message = undefined; | |
| if (this.state.error) { | |
| message = React.createElement( | |
| "div", | |
| null, | |
| "There was an error validating your email" | |
| ); | |
| } else { | |
| message = ""; | |
| } | |
| return React.createElement( | |
| "div", | |
| null, | |
| React.createElement(Input, { onChange: this.onChange }), | |
| message | |
| ); | |
| } | |
| }]); | |
| return Application; | |
| })(React.Component); | |
| var Input = (function (_React$Component2) { | |
| _inherits(Input, _React$Component2); | |
| function Input() { | |
| _classCallCheck(this, Input); | |
| _get(Object.getPrototypeOf(Input.prototype), "constructor", this).call(this); | |
| this.onChange = this.onChange.bind(this); | |
| } | |
| _createClass(Input, [{ | |
| key: "onChange", | |
| value: function onChange() { | |
| this.props.onChange(this.refs.input.value); | |
| } | |
| }, { | |
| key: "render", | |
| value: function render() { | |
| return React.createElement("input", { type: "email", placeholder: "Enter your email address", ref: "input", onChange: this.onChange }); | |
| } | |
| }]); | |
| return Input; | |
| })(React.Component); | |
| ReactDOM.render(React.createElement(Application, null), mountNode); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>React</title> | |
| <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css"> | |
| <script src="//fb.me/react-with-addons-0.14.3.js"><\/script> | |
| <script src="//fb.me/react-dom-0.14.3.js"><\/script> | |
| </head> | |
| <body> | |
| <div id="container"></div> | |
| </body> | |
| </html> | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">body { | |
| margin: 20px; | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">//Create React component which validates entered email address in input field. While user is entering email address (on each key press) component updates the message below the input field which shows the result of validation. | |
| const mountNode = document.getElementById("container"); | |
| // Containers | |
| class Application extends React.Component { | |
| constructor() { | |
| super(); | |
| this.state = { | |
| error: false | |
| } | |
| this.emailPattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; | |
| this.onChange = this.onChange.bind(this); | |
| this.validate = this.validate.bind(this); | |
| } | |
| validate(val) { | |
| this.setState({ error: !this.emailPattern.test(val)}) | |
| } | |
| onChange(val) { | |
| this.validate(val); | |
| this.setState | |
| } | |
| render() { | |
| let message; | |
| if(this.state.error) { | |
| message = <div>There was an error validating your email</div> | |
| } else { | |
| message = "" | |
| } | |
| return ( | |
| <div> | |
| <Input onChange={this.onChange}/> | |
| {message} | |
| </div> | |
| ) | |
| } | |
| } | |
| // Components | |
| class Input extends React.Component { | |
| constructor() { | |
| super(); | |
| this.onChange = this.onChange.bind(this); | |
| } | |
| onChange() { | |
| this.props.onChange(this.refs.input.value); | |
| } | |
| render() { | |
| return ( | |
| <input type="email"placeholder="Enter your email address" ref="input" onChange={this.onChange}/> | |
| ) | |
| } | |
| } | |
| ReactDOM.render(<Application/>, mountNode);</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin: 20px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //Create React component which validates entered email address in input field. While user is entering email address (on each key press) component updates the message below the input field which shows the result of validation. | |
| "use strict"; | |
| var _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; }; })(); | |
| var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; | |
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
| function _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; } | |
| var mountNode = document.getElementById("container"); | |
| // Containers | |
| var Application = (function (_React$Component) { | |
| _inherits(Application, _React$Component); | |
| function Application() { | |
| _classCallCheck(this, Application); | |
| _get(Object.getPrototypeOf(Application.prototype), "constructor", this).call(this); | |
| this.state = { | |
| error: false | |
| }; | |
| this.emailPattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; | |
| this.onChange = this.onChange.bind(this); | |
| this.validate = this.validate.bind(this); | |
| } | |
| // Components | |
| _createClass(Application, [{ | |
| key: "validate", | |
| value: function validate(val) { | |
| this.setState({ error: !this.emailPattern.test(val) }); | |
| } | |
| }, { | |
| key: "onChange", | |
| value: function onChange(val) { | |
| this.validate(val); | |
| this.setState; | |
| } | |
| }, { | |
| key: "render", | |
| value: function render() { | |
| var message = undefined; | |
| if (this.state.error) { | |
| message = React.createElement( | |
| "div", | |
| null, | |
| "There was an error validating your email" | |
| ); | |
| } else { | |
| message = ""; | |
| } | |
| return React.createElement( | |
| "div", | |
| null, | |
| React.createElement(Input, { onChange: this.onChange }), | |
| message | |
| ); | |
| } | |
| }]); | |
| return Application; | |
| })(React.Component); | |
| var Input = (function (_React$Component2) { | |
| _inherits(Input, _React$Component2); | |
| function Input() { | |
| _classCallCheck(this, Input); | |
| _get(Object.getPrototypeOf(Input.prototype), "constructor", this).call(this); | |
| this.onChange = this.onChange.bind(this); | |
| } | |
| _createClass(Input, [{ | |
| key: "onChange", | |
| value: function onChange() { | |
| this.props.onChange(this.refs.input.value); | |
| } | |
| }, { | |
| key: "render", | |
| value: function render() { | |
| return React.createElement("input", { type: "email", placeholder: "Enter your email address", ref: "input", onChange: this.onChange }); | |
| } | |
| }]); | |
| return Input; | |
| })(React.Component); | |
| ReactDOM.render(React.createElement(Application, null), mountNode); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment