Ad
Cannot Read Property 'refs' Of Null React Error React Js
I'm using React js 0.14.3, I'm trying to create a Side Menu component using react but I don't know why I have an "Cannot read property 'refs' of null" when I use the refs like in the react documentation : https://facebook.github.io/react/docs/more-about-refs.html Can you help me please ?
'use strict';
import React from 'react';
import BaseComponent from './../../BaseComponent.react';
import Menu from './SidePanelMenu';
import MenuItem from './SidePanelMenuItem';
class SidePanel extends BaseComponent {
showLeft() {
this.refs.leftmenu.show();
}
render() {
return(
<div>
<button onClick={this.showLeft}>Show Left Menu!</button>
<Menu ref="leftmenu" alignment="left">
<MenuItem hash="first-page">First Page</MenuItem>
<MenuItem hash="second-page">Second Page</MenuItem>
<MenuItem hash="third-page">Third Page</MenuItem>
</Menu>
</div>
);
}
}
export default SidePanel;
Ad
Answer
You need to bind context of this
.
The line where you are binding your onClick
handler:
onClick={this.showLeft}
Needs to be:
onClick={this.showLeft.bind(this)}
Otherwise when you're calling showLeft
it can't access this
.
Ad
source: stackoverflow.com
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?
Ad