Skip to content

Commit

Permalink
Fix null-ref error
Browse files Browse the repository at this point in the history
Fixed "TypeError: this.refs.btn is undefined" caused by inline-ref-callback.
See https://reactjs.org/docs/refs-and-the-dom.html#caveats
  • Loading branch information
surgeboris committed Nov 11, 2017
1 parent 492b1be commit acdf5ec
Showing 1 changed file with 7 additions and 2 deletions.
9 changes: 7 additions & 2 deletions patterns/19.async-nature-of-setState.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,11 @@ make sure the code that follows has access to the latest information available.

```javascript
class TestComponent extends React.Component {
constructor(...args) {
super(...args);
this._saveButtonRef = (btn => { this._btnRef = btn });
}

getInitialState() {
return {
dollars: 10
Expand All @@ -41,7 +46,7 @@ class TestComponent extends React.Component {
// effects on how state mutates
//
// Check the list here - https://facebook.github.io/react/docs/events.html
this.refs.btn.addEventListener('mouseleave', this._onMouseLeaveHandler);
this._btnRef.addEventListener('mouseleave', this._onMouseLeaveHandler);

// Add JS timeout
//
Expand All @@ -59,7 +64,7 @@ class TestComponent extends React.Component {

return (
<button
ref={(btn) => this.btn = btn}
ref={this._saveButtonRef}
onClick={this._onClickHandler}>
'Click me'
</button>
Expand Down

0 comments on commit acdf5ec

Please sign in to comment.