# Events

## Differences from HTML

* camelCase events, rather than lowercase 
* pass a function as the event handler, rather than a string 

```markup
<!-- HTML -->
<button onclick="activateLasers()">
  Activate Lasers
</button>
```

becomes

```jsx
//React
<button onClick={activateLasers}>
  Activate Lasers
</button>
```

#### PreventDefault

call `preventDefault` rather then return false

```markup
<!-- HTML -->
<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>
```

becomes

```jsx
//React
function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}
```

e is a synthetic event handling cross-browser compat

## Usage

Pass functions into event handlers

* use `event.persist();` if you access async because react event objects are recycled so could be different

```jsx
class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);
```

### Bind()

`[method].bind(this)` is a vanilla JS function that sets the `this` ptr of the function to the arg passed needed when passing ft like in callbacks rather than calling it

Generally, if you refer to a method without `()` after it, such as `onClick={this.handleClick}`, you should bind that method.

**Not using bind()?**

```jsx
class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}
```

### Passing arg to Event Handler

```jsx
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
```

Equivalent using arrow fts and bind respectively, e will be 2nd arg in both


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://openai.gitbook.io/code-cheatsheets/react/events.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.