JSFiddle - React, Tailwind, and code Playground

HTML

<div id='output'></div>
<script src="https://fb.me/react-15.0.0-rc.2.js"></script>
<script src="https://fb.me/react-dom-15.0.0-rc.2.js"></script>

Babel + JSX

'use strict'

class ControlledTestComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      emailValue: 'stringFromTheState',
      textValue: 'stringFromTheState'
    }
    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: 'stringFromTheState',
     textValue: 'stringFromTheState'
   });
  }
  
  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} />
       <br/>
       <h3> Without onChange </h3>
      <label>text</label>
     <input
       type="text"
       value={this.state.textValue} />
      <br/>
      <label>email</label>
     <input
       type="email"
       value={this.state.emailValue} />
       
   </div>
  )
  }
}



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