將'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/

此外，如果你有分量的一個列表，其中每個組件需要的數據的一個獨特的作品傳給你可以這樣做使用綁定的父。

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/