JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="myApp"></div>

React

class Registration extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      selectedGender: null,
      errors: [],
      initComplete: false,
      buttonIsDisabled: true,
      numberValue: "",
      emailValue: "",
      codeValue: "",
    }
    this.changeNumber = this.changeNumber.bind(this);
    this.changeEmail = this.changeEmail.bind(this)
    this.changeCode = this.changeCode.bind(this);
  }

  changeNumber = (e) => {
    let s = true;
    if(this.state.emailValue.length && this.state.codeValue.length && e.target.value.length) {
      s = false;
    }
    let val = e.target.value;
    //let val = utils.removeNonNumbers(e.target.value);
    this.setState({numberValue: val, buttonIsDisabled: s, errors: []});
  }

  changeEmail = (e) => {
    let s = true;
    if(this.state.numberValue.length && this.state.codeValue.length && e.target.value.length) {
      s = false;
    }
    this.setState({emailValue: e.target.value, buttonIsDisabled: s, errors: []});
  }

  changeCode = (e) => {
    let s = true;
    if(this.state.numberValue.length && this.state.emailValue.length && e.target.value.length) {
      s = false;
    }
    this.setState({codeValue: e.target.value, buttonIsDisabled: s, errors: []});
  }

  render() {
    return (
      <div className="container-fluid">
      <form onSubmit={this._handleSubmit}>
      <div className="form-group has-danger">
        <label htmlFor="input-MobileNum">number *</label>
<input type="tel" className={'form-control ' } id="input-MobileNum" onChange={this.changeNumber} />
  </div>
<div className="form-group has-danger">
  <label htmlFor="input-Email">Email address *</label>
<input type="email" className={'form-control '} id="input-Email" onChange={this.changeEmail} />
  </div>
<div className="form-group has-danger">
  <label htmlFor="input-Invitation">Invitation code</label>
<input type="text" className={'form-control '} id="input-Invitation" onChange={this.changeCode} />
  </div>
<div...