JSFiddle - React, Tailwind, and code Playground

by Casey Burnett

HTML

<div id='output'></div>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<!-- bug shows up in 15.2
<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>
-->
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

Babel + JSX

'use strict'

class ControlledTestComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      emailValue: 'some spaces to delete',
      textValue: 'some spaces to delete'
    }
    this.onTextChange = this.onTextChange.bind(this);
    this.onEmailChange = this.onEmailChange.bind(this);
    this.resetValue = this.resetValue.bind(this);
  }
  
  onTextChange(event) {
    this.setState({
      textValue: event.target.value
    });
  }
  
  onEmailChange(event) {
    this.setState({
      emailValue: event.target.value
    });

  }
  
  resetValue() {
   this.setState({
     emailValue: 'some spaces to delete',
     textValue: 'some spaces to delete'
   });
  }
  
  render() {
     console.log(this.state);
    return (
   <div>
     <button onClick={this.resetValue}>
      Reset Value
     </button>
     <br/>
      <h3> With onChange </h3>
      <label>text</label>
     <input
       onChange={this.onTextChange}
       type="text"
       value={this.state.textValue} />
      <br/>
      <label>email</label>
     <input
       onChange={this.onEmailChange}
       type="email"
       value={this.state.emailValue} />
   </div>
  )
  }
}



ReactDOM.render(
 <ControlledTestComponent/>,
 document.getElementById('output')
)