Невозможно прочитать "refs" свойства null error error js

Я использую React js 0.14.3, я пытаюсь создать компонент Side Menu, используя реакцию, но я не знаю, почему у меня есть "Can not read property" refs "null", когда я использую refs как в реакционной документации: https://facebook.github.io/react/docs/more-about-refs.html Можете ли вы мне помочь?

'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;

Ответ 1

Вам нужно связать контекст this.

Строка, в которой вы привязываете обработчик onClick:

onClick={this.showLeft}

Нужно быть:

onClick={this.showLeft.bind(this)}

В противном случае, когда вы вызываете showLeft, он не может получить доступ к this.

Ответ 2

Измените это:

<button onClick={this.showLeft}>Show Left Menu!</button>

Для этого:

<button onClick={::this.showLeft}>Show Left Menu!</button>`

Ответ 3

Это может быть проблема. попробуйте

showLeft = () => {
            this.refs.leftmenu.show();
        }

Ответ 4

Вы также можете связать его так, чтобы избежать ошибки eslint No .bind() or Arrow Functions in JSX Props:

class SidePanel extends BaseComponent {
    constructor(props) {
        super(props);
        this.showLeft = this.showLeft.bind(this);
        this.state = {
            error: false,
        };
    }

    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>
        );
    }
}

Ответ 5

Ваш код написан на ES6. В отличие от ES5, в ES6 нет автоматической привязки.

Таким образом, вы должны явно привязать функцию к экземпляру компонента, используя this.functionName.bind(this).

Так же:

<button onClick={this.showLeft.bind(this)}>Show Left Menu!</button>

Без привязки, когда вы нажимаете на кнопку, кнопка this на кнопке относится к самой кнопке, а не к функции. Поэтому JavaScript пытается найти refs в элементе кнопки, что дает вам эту ошибку.