Skip to content

Instantly share code, notes, and snippets.

@Fercho191
Last active December 8, 2018 20:14
Show Gist options
  • Save Fercho191/40b0f52ece17df2ccd64941695b42b59 to your computer and use it in GitHub Desktop.
Save Fercho191/40b0f52ece17df2ccd64941695b42b59 to your computer and use it in GitHub Desktop.
Como hacer en Binding de metodos en React. CodeSanbox: https://codesandbox.io/embed/5wo9q2yn9p
import React, { Component } from "react";
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
gretting: "Hi"
};
this.handleButtonClick = this.handleButtonClick.bind(this);
this.handleButtonCLickWithParam = message => this._handleButtonCLickWithParam.bind(this, message);
}
/**
* This its a good binding
*/
handleButtonClick() {
alert(`Correct Binding: ${this.state.gretting}`);
}
/**
* This its a good binding with params
*/
_handleButtonCLickWithParam(message) {
alert(`${this.state.gretting}: ${message}`);
}
/**
* This its a bad binding, in this case, this its undefines
*/
handleButtonClickWithoutBinding() {
alert(`Without binding: ${this}`);
}
render() {
return (
<div className="my-component">
<button onClick={this.handleButtonClick}>Good Binding</button>
<button onClick={this.handleButtonCLickWithParam("world")}>
Biding with params
</button>
<button onClick={this.handleButtonClickWithoutBinding}>
Without binding!
</button>
</div>
);
}
}
export default MyComponent;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment