JSFiddle - React, Tailwind, and code Playground

by Casey Burnett

HTML

<div id='output'></div>
<!-- no bug in 15.1.0 -->
<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>
<!-- bug shows up in 15.2
<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>
-->
<!-- react-dom 15.0 / 15.1 / 15.2 / 15.3 . do not cause issues -->
<script src="https://unpkg.com/[email protected]/dist/react-dom.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/>
      <p> Press and hold delete from EOL on both input fields </p>
      <p> Change to React 15.2.0 and RUN then repeat</p>
      <p> Bug shows in 15.2.0</p>
      <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')
)