#app
View Compiled
class Element extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null
    };
    this.onFocusEvent = this.onFocusEvent.bind(this);
    this.onBlurEvent = this.onBlurEvent.bind(this);
    this.onMouseDownEvent = this.onMouseDownEvent.bind(this);
    this.onMouseUpEvent = this.onMouseUpEvent.bind(this);
    this.onClickEvent = this.onClickEvent.bind(this);
  }
  
  componentDidMount() {
    if (this.textInput)
      this.textInput.focus();  
  }
  
  onFocusEvent(e) {
    console.log('focus');
    this.setState({ error: null });
  };

  onBlurEvent(e) {
    console.log('blur');
    this.setState({ error: <label className="label label-danger">Error</label> });
  }

  onClickEvent(e) {
    console.log('click');
  }
  
  onMouseDownEvent(e) {
    console.log('mousedown');    
  }
  
  onMouseUpEvent(e) {
    console.log('mouseup');
  }
  
  render() {
    return (
      <div id="events">
        <h1>Synthetic Events</h1>
        <form>
          <input className="form-control" ref={(input) => this.textInput = input} type="text" name="test" onFocus={this.onFocusEvent} onBlur={this.onBlurEvent} />
          {this.state.error}
          <button onClick={this.onClickEvent} onMouseDown={this.onMouseDownEvent} onMouseUp={this.onMouseUpEvent} type="button">Cancel</button>
        </form>
      </div>
    );
  }
}

ReactDOM.render(
  React.createElement(Element),
  document.getElementById('app')
);
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js