React Events

index

• Intro

Intro

React makes use of basic HTML events by wrapping them in something called SyntheticEvents. This wrapper allows React to make sure events are handled the same way across all browsers by a consistent API.

class Tickler extends React.Component {

  tickle = () => {
    console.log('Tee hee!')
  }

  render() {
    return (
      <button onClick={this.tickle}>Tickle me!</button>
    )
  }
}

The handler name is always comprised of on, and the event name itself (i.e. click). These are joined together and camel-cased. As you know, the value of the events are callbacks (either a reference to a function or an inline function). You will commonly see React component methods defined with arrow functions. This is because we often want to access the this keyword within the methods themselves.

component with multiple events:

render() {
    return (
      <canvas 
        onMouseMove={this.handleMouseMove}
        onClick={() => {toggleCycling()}}
        onKeyDown={this.handleKeyDown}
        width='900'
        height='600
        tabIndex="0">
      </canvas>
    )
  }

Handling mouse coordinates with onMouseMove

handleMouseMove = (event) => {
    drawChromeBoiAtCoords(event.clientX, event.clientY);
  }

up

State