Posted By

LanaS on 06/03/16


Tagged

form login javascript bootstrap React Reactjs


Versions (?)

Bootstrap Login Form using React.js


 / Published in: JavaScript
 

URL: http://xbsoftware.com/react-js-development/

A simple Bootstrap login form wrapped with React.js

  1. import React from 'react';
  2.  
  3. export default React.createClass({
  4. propTypes: {
  5. options: React.PropTypes.object,
  6. onChange: React.PropTypes.func,
  7. onSubmit: React.PropTypes.func
  8. },
  9. onChange(e){
  10. if(this.props.onChange){
  11. this.props.onChange(e.target, e.target.value, e);
  12. };
  13. },
  14. onSubmit(e){
  15. e.preventDefault();
  16. if(this.props.onSubmit){
  17. this.props.onSubmit(e);
  18. };
  19. },
  20. render() {
  21. let options = {
  22. email: {
  23. label: "Email ddress",
  24. placeholder: "Email"
  25. },
  26. password: {
  27. label: "Password",
  28. placeholder: "Password"
  29. },
  30. checkbox: {
  31. text: "Check me out"
  32. },
  33. submitButton: {
  34. text: "Submit"
  35. }
  36. };
  37. options = Object.assign(options, this.props.options || {});
  38. return <div>
  39. <form>
  40. <div className="form-group">
  41. <label>{options.email.label}</label>
  42. <input type="email" onChange={this.onChange} className="form-control" placeholder={options.email.placeholder} />
  43. </div>
  44. <div className="form-group">
  45. <label>{options.password.label}</label>
  46. <input type="password" onChange={this.onChange} className="form-control" placeholder={options.password.placeholder} />
  47. </div>
  48. <div className="checkbox">
  49. <label>
  50. <input type="checkbox" onChange={this.onChange} /> {options.checkbox.text}
  51. </label>
  52. </div>
  53. <button type="submit" onClick={this.onSubmit} className="btn btn-default">{options.submitButton.text}</button>
  54. </form>
  55. </div>
  56. }
  57. });

Report this snippet  

You need to login to post a comment.