this refs is getting undefined in method

Question

I am trying to use this plugin in my project https://github.com/rt2zz/react-native-drawer. I could run the example properly but having problem integrating it.

I am getting error in method openDrawer. "Can not read property drawer of undefined"

I am guessing that I am not defining and using the class in the right way as it should be ( i'm new to javascript OOP ) as in example it use React.createClass({ unlike mine as extending Component and have constructor.

Relevant codes from my class are as follow.

class Search extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: new ListView.DataSource({
               rowHasChanged: (row1, row2) => row1 !== row2
            })
        };
    }

    openDrawer(){
        this.refs.drawer.open()
    }

    getInitialState(){
        return {
          drawerType: 'overlay',

        }
    }

Render are

render() {
        if (this.state.isLoading) {
            return this.renderLoadingView();
        }

        var controlPanel = <MyControlPanel closeDrawer={() => {this.refs.drawer.close()}} />

        return (


            <View>
                <View style={styles.topBar}>

                    <Drawer
                        ref="drawer"
                        >
                        <MyMainView
                          />
                    </Drawer>

                    <Text style={styles.topBarMenu}>&#9776;</Text>
                    <Text style={styles.topBarTitle}>เงินปันผล</Text>
                    <Text style={styles.topBarRight}></Text>
                </View>

Answer 1

There is a better way than putting this.openDrawer = this.openDrawer.bind(this) in constructor Declare openDrawer method with arrows function:

openDrawer = () => {
  this.refs.drawer.open()
}