Bind an event - React

Bind an event - React
0
#1

HI,
I’m learning the events:
I don’t understand this line, the bind method attach this to update, but this.update are not an argument in the constructor?
I’ll expect in object programming, constructor ( update ) { this.update = …

this.update = this.update.bind(this) //udate method and bind to the context

my all code works well:

import React from 'react'

class SynteticEventSystem extends React.Component {
  constructor(){
    super()
    this.state  = { currentEvent: '------' }
    this.update = this.update.bind(this) //udate method and bind to the context
  }
  update(e){
    this.setState({currentEvent: e.type});
  }
  render() {
    return (
      <div>
        <textarea 
          onKeyPress={this.update}
          onCopy={this.update}
          onCut={this.update}
          onPaste={this.update}
          onFocus={this.update}
          onBlur={this.update}
          onDoubleClick={this.update}
          onTouchStart={this.update}
          onTouchMove={this.update}
          onTouchEnd={this.update}
          rows='3'
          cols='10' />
        <h1> { this.state.currentEvent }</h1>
      </div>
    );
  }
}

export default SynteticEventSystem
#2

The this on your render is some weird thing, that’s why not using bind this will result in a X is undefined.

You can use an arrow function instead

(e) => this.update(e)

Hope that helps .

#3

I’m calling this method in the constructor… I need an identifier.

#4

You can use the arrow function instead of calling it in the constructor.

#5

I’m calling this.update in the html ?

#6

like this?

class UsingRefsToAccessComponents extends React.Component {
  constructor(){
    super()
    this.state = {
      a: '---' 
    }
  }
  updateMe = (e) => {
    this.setState({a: e.target.value}); 
  }
  render() {
    return (
      <div>
        <input 
          type='text' 
          onChange={this.updateMe.bind(this)}
        />
        <h1> { this.state.a } </h1>
      </div>
    );
  }
#7 
class UsingRefsToAccessComponents extends React.Component {
  constructor(){
    super()
    this.state = {
      a: '---' 
    }
  }
  updateMe(e) {
    this.setState({a: e.target.value}); 
  }
  render() {
    return (
      <div>
        <input 
          type='text' 
          onChange={(e) => this.updateMe(e)}
        />
        <h1> { this.state.a } </h1>
      </div>
    );
  }
#8

I see, it’s weird I have to create a function to call updateMe() :

EDIT: I don’t declare the function with let or const but it works?

class UsingRefsToAccessComponents extends React.Component {
  constructor(){
    super()
    this.state = {
      a: '---' 
    }
  }
  updateMe = () => {
    this.setState({
      a: this.refs.a.value,
      b: this.refs.b.value
    }); 
  }
  render() {
    return (
      <div>
        <input 
          ref='a'
          type='text' 
          onChange={() => this.updateMe()}
        />
        {/* onChange={this.updateMe.bind(this)} */}
        { this.state.a } 
        <hr />
        <input 
          ref='b'
          type='text' 
          onChange={() => this.updateMe()}
        />
        {/* onChange={this.updateMe.bind(this)} */}
        { this.state.b } 
      </div>
    );
  }
}
export default UsingRefsToAccessComponents
#9

Here is an example, hope it makes it clear.

class App extends Component {
  constructor() {
    super();
    this.state = {
      counter = 0
    };
  }
  
  updateCounter(e) {
    this.setState({
      counter: counter + 1
    });
  }

  render() {
    return (
      <div>
        <h1>{this.state.counter}</h1>
        <button onClick={(e) => this.updateCounter(e)}>Click me!</button>
      </div>
    );
  }
}
#10

It was clear the first time, I got it.
Thanks