在Onsen UI + React應用程序中renderToolbar內部的回調不起作用

Question

我正在嘗試使用Onsen UI + React來獲取需要分離器和導航的應用程序。 Page對象使用函數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 { 

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