Обратный вызов внутри renderToolbar в приложении Onsen UI + React не работает

Question

Я пытаюсь использовать Onsen UI + React для приложения, которое должно иметь сплиттер и навигацию. Объект Page использует функцию renderToolbar, в которой определены кнопки с методом для открытия Splitter.

Это не когда я нажимаю на кнопку на панели инструментов, но работает, когда я нажимаю на кнопку со страницы. Зачем?

Вот полный код:

import React from 'react';
import ReactDOM from 'react-dom';
import {
    Toolbar, Page, Button, ToolbarButton, Icon, Input,
    Splitter, SplitterSide, SplitterContent
} from 'react-onsenui';

import SecondPage from './SecondPage'

export default class MainPage extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            isOpen: false
        };

        this.show = this.show.bind(this);
    }

    /**
     * Show side menu
     */
    show() {
        this.setState({
            isOpen: true
        });
    }

    /**
     * Hide side menu
     */
    hide() {
        this.setState({
            isOpen: false
        });
    }

    /**
     * Push page to navigation stack
     */
    pushPage() {
        this.props.navigator.pushPage({component: SecondPage});
    }

    /**
     * Render top toolbar (action bar)
     */
    renderToolbar() {
        return (
            <Toolbar>
                <div className="right">
                    <ToolbarButton onClick={this.show}><Icon icon='menu'/></ToolbarButton>  <--- DON'T WORK!
                </div>
            </Toolbar>
        );
    }

    render() {
        return (
            <Splitter>
                <SplitterSide
                    side='left'
                    collapse={true}
                    isOpen={this.state.isOpen}
                    onClose={this.hide.bind(this)}
                    isSwipeable={true}>
                    <Page>
                        <div>Menu content</div>
                    </Page>
                </SplitterSide>
                <SplitterContent>
                    <Page renderToolbar={this.renderToolbar}>
                        <div>Main content</div>
                        <Button onClick={this.show}>Open</Button>  <--- WORK!
                    </Page>
                </SplitterContent>
            </Splitter>
        );
    }
}

Answer 1

После многих вариантов я понял, что функция renderToolbar также должна иметь привязку, поэтому, наконец, код:

import React from 'react';
import ReactDOM from 'react-dom';
import {
    Toolbar, Page, Button, ToolbarButton, Icon, Input,
    Splitter, SplitterSide, SplitterContent
} from 'react-onsenui';

import SecondPage from './SecondPage'

export default class MainPage extends React.Component {

    // const rightDirect = "right";
    constructor(props) {
        super(props);

        this.state = {
            isOpen: false
        };

        this.hide = this.hide.bind(this);
        this.show = this.show.bind(this);
        this.renderToolbar = this.renderToolbar.bind(this);
    }

    /**
     * Show side menu
     */
    show() {
        this.setState({
            isOpen: true
        });
    }

    /**
     * Hide side menu
     */
    hide() {
        this.setState({
            isOpen: false
        });
    }

    /**
     * Push page to navigation stack
     */
    pushPage() {
        this.props.navigator.pushPage({component: SecondPage});
    }

    /**
     *
     */
    renderToolbar() {
        console.log('Render TB', this);
        return (
            <Toolbar>
                <div className="right">                        
                    <ToolbarButton onClick={this.show}><Icon icon='menu'/></ToolbarButton>
                </div>
            </Toolbar>
        );
    }

    /**
     *
     * @returns {XML}
     */
    render() {
        return (
            <Splitter>
                <SplitterSide
                    side='left'
                    collapse={true}
                    isOpen={this.state.isOpen}
                    onClose={this.hide}
                    isSwipeable={true}>
                    <Page>
                        <div>Menu content</div>
                    </Page>
                </SplitterSide>
                <SplitterContent>
                    <Page renderToolbar={this.renderToolbar}>
                        <div>Main content</div>
                    </Page>
                </SplitterContent>
            </Splitter>
        );
    }
}