将'this'绑定到NavigationBarRouteMapper非函数

Question

I have a NavBarRouteMapper object that I pass to my navbar. However, in the onpress function of one of the buttons I need to access the state, but I'm not sure how to bind 'this' to the object, since it is a non-function. Relevant code as follows

 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

So you're trying to return the parent's state from the child onClick? If so you can add an onClick which calls the parent onClick that you can pass to the child via props.

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/

Also if you had a list of components where each component needs to pass a unique piece of data to the parent you can do so using bind.

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/