将'this'绑定到NavigationBarRouteMapper非函数

Question

我有一个NavBarRouteMapper对象，我传递给我的导航栏。 但是，在其中一个按钮的onpress功能中我需要访问状态，但是我不知道如何将'this'绑定到对象，因为它是一个非函数。 相关代码如下

 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/

此外，如果您有一个组件列表，其中每个组件需要将唯一的数据传递给父组件，您可以使用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/