reactjs - Onsen UI + React应用程序中的renderToolbar内的回调不起作用

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