React composition events

by Robbert Brak

HTML

<script src="https://unpkg.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<div id="container"></div>

CSS

.contenteditable {
  border: 1px solid gray;
  width: 400px;
  height: 200px;
  margin-bottom: 40px;
}

JavaScript

var App = React.createClass({
  displayName: "App",
  render: function render() {
    return React.createElement(
      "div",
      null,
      React.createElement(
        "div",
        { className: 'contenteditable', 
        	contentEditable: true, 
          suppressContentEditableWarning: true,
          onFocus: this.onFocus,
          onCompositionStart: this.logEvent,
          onCompositionUpdate: this.logEvent,
          onCompositionEnd: this.logEvent },
        React.createElement(
          "div",
          null,
          'Type here'
        )
      ),
      React.createElement("input", { type: "text",
      	onFocus: this.onFocus,
        onCompositionStart: this.logEvent,
        onCompositionUpdate: this.logEvent,
        onCompositionEnd: this.logEvent,
        defaultValue: 'Or here'
      })
    );
  },
  logEvent: function logEvent(e) {
    console.log(e.type, e.data);
  },
  
  onFocus: function onFocus(e) {
  	console.log('focus', e.target);
  },
});

ReactDOM.render(React.createElement(App, { name: "world" }), document.getElementById('container'));