バインド 'this' to NavigationBarRouteMapper非機能

Question

私はNavbarに渡すNavBarRouteMapperオブジェクトを持っています。しかし、ボタンの1つのオンプレス機能では、状態にアクセスする必要がありますが、非機能なので、オブジェクトに「これ」をバインドする方法がわかりません。関連するコード

class app extends Component { 
    state: { 
    sideMenuIsOpen: boolean, 
    }; 
    constructor(props: Object) { 
     super(props); 
    this.state = { 
     sideMenuIsOpen: false, 
    }; 
    }; 

static NavigationBarRouteMapper = { 
    LeftButton(route, navigator, index, navState) { 
     if (index > 0) { 
     return (
      <SimpleButton 
      // TODO: Make this work, Menu button needs to go to this 
      // The problem is here. this.state is undefined 
      onPress={console.log(this.state)} 
      customText="Back" 
      style={styles.navBarLeftButton} 
      textStyle={styles.navBarButtonText} 
      /> 
     ); 
     } 
    }, 
    RightButton(route, navigator, index, navState) { 
     // TODO change add button for admins 
     switch (route.title) { 
     case "Login": 
      return null; 
     default: 
      return (
      <SimpleButton 
       onPress={() => { 
       navigator.push({ 
        title: "Profile", 
        component: Profile, 
       }); 
       }} 
       customText="Add" 
       style={styles.navBarRightButton} 
       textStyle={styles.navBarButtonText} 
      /> 
     ); 
     } 
    }, 
    Title(route, navigator, index, navState) { 
     return (
     <Text style={styles.navBarTitleText}>{route.title}</Text> 
     ); 
    }, 
    }; 


render() { 
    return (
     <SideMenu 
     menu={<Menu navigate={this.navigate} />} 
     isOpen={this.state.sideMenuIsOpen} 
     > 
     <Navigator 
      ref="rootNavigator" 
      initialRoute={{ 
      title: "Login", 
      component: LoginScene, 
      navigator: this.refs.rootNavigator, 
      }} 
      renderScene = {this.renderScene} 

      navigationBar={ 
      <Navigator.NavigationBar 
       // Since this is an object, I can't bind 'this' to it, 
       // and the documentation calls for it to be passed an object 
       routeMapper={app.NavigationBarRouteMapper} 
       style={styles.navBar} 
       /> 
      } 
     /> 
     </SideMenu> 
    ); 
    }; 

}

Answer 1

を次のようにだから、子供のonClickから親の状態を返すようにしようとしていますか？そうであれば、親のonClickを呼び出すonClickを追加して、子に渡すことができます。また

var Hello = React.createClass({ 
    getInitialState: function() { 
    return {test: "testing 1 2 3"}; 
    }, 
    clickMethod: function() { 
    alert(this.state.test); 
    }, 
    render: function() { 
    return <div onClick={this.clickMethod}>Hello {this.props.name}</div>; 
    } 
}); 

var Child = React.createClass({ 
    render: function() { 
    return <div>Hello {this.props.name}</div>; 
    } 
}); 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container') 
); 

https://jsfiddle.net/reactjs/69z2wepo/

は、各コンポーネントがバインドを使用して行うことができ、親へのデータのユニークな作品を渡す必要があるコンポーネントのリストを持っていた場合。

var Hello = React.createClass({ 
    getInitialState: function() { 
    return {test: "testing 1 2 3"}; 
    }, 
    clickMethod: function (argument) { 
    alert(argument); 
    }, 
    render: function() { 
    return <div onClick={this.clickMethod.bind(this, "custom argument")}>Hello {this.props.name}</div>; 
    } 
}); 

var Child = React.createClass({ 
    render: function() { 
    return <div>Hello {this.props.name}</div>; 
    } 
}); 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container') 
); 

https://jsfiddle.net/chrshawkes/64eef3xm/1/