React: Handling Events

TL'DR

Tags: React, 传递, 额外参数, extra, arguments, 事件处理, event handling

Use this binding

<button onClick={()=>this.f1(this, id)}>Delete Row</button>

f1 = (event, id){
	……
}

/* binding is important */

this.function = this.deleteRow.bind(this);

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

/* event is unnecessary */
f1 = (id, event){
	……
}

No this binding

Not recommended

<button onClick={this.handleRemove} value={id} abc={id} data-bcd={id}>
    Remove
</button>

handleRemove(event) {
 remove(event.target.value); 
 remove(event.target.getAttribute('abc'))
 remove(event.target.dataset.bcd)

}

React: Handling Events

Some notes：

• React events are named using camelCase, rather than lowercase.
• With JSX you pass a function as the event handler, rather than a string.

For example, the HTML:

<button onclick="activateLasers()">
  Activate Lasers
</button>

is slightly different in React:

<button onClick={activateLasers}>
  Activate Lasers
</button>

Another difference is that you cannot return false to prevent default behavior in React. You must call preventDefault explicitly.

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

In React, this could instead be:

function ActionLink() {
  function handleClick(e) {
    e.preventDefault(); // must be called implicitly 
    console.log('The link was clicked.');
  }

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

When using React you should generally not need to call addEventListener to add listeners to a DOM element after it is created.

Instead, just provide a listener when the element is initially rendered.

Example

class Welcome extends React.Component{
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    this.handleClick = this.handleClick.bind(this);  // bind the event to this
  }

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

  render(){
    return (
      <div onClick={this.handleClick}>  // bind the onClick event
       {(this.state.isToggleOn)?'A':'B'}, {this.props.name}
      </div>
    );
  }
}

Passing Arguments to Event Handlers

<button onClick={(event) => this.deleteRow(arg1, arg2, e)}>Delete Row</button>

// This example do not pass the event
<button onClick={() => this.deleteRow(arg1, arg2)}>Delete Row</button>

<button onClick={this.deleteRow.bind(this, arg1, arg2)}>Delete Row</button>

Get attr 'value'

For below solution we do not pass any arguments, we may reach the DOM through event to get extra attributes

<button onClick={this.handleRemove} value={id} abc={id} data-bcd={id}>
    Remove
</button>

handleRemove(event) {
 remove(event.target.value); // only value attribute can be reached directly 
 remove(event.target.getAttribute('abc')) // getAttribute will ALWAYS return value in 'String' type 
 remove(event.target.dataset.bcd) // Still, will get value as String 

}