此引用在方法中未定义

Question

我正在尝试在我的项目中使用这个插件 https://github.com/rt2zz/react-native-drawer。我可以运行该示例正确但在集成它时遇到问题。

我在方法 openDrawer 中遇到错误。 "Can not read property drawer of undefined"

我猜我没有以正确的方式定义和使用 class（我是 javascript OOP 的新手），例如它使用 React.createClass({ 与我的不同，因为它扩展了 Component 并具有构造函数。

我class的相关代码如下。

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() {
        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

我认为您最好重新使用 createClass 。 ES6 创建类（扩展）的方式与 createClass 相比有一些缺点：方法是未绑定的（即 "this" 不一定指向对象），而且你不能使用非常有用的混合。未绑定方法是您遇到的问题。如果您可以控制调用方法的位置并绑定方法（例如，在 javascript 中查找方法绑定，请在此处查找方法绑定：http://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/ )

Answer 2

有比将 this.openDrawer = this.openDrawer.bind(this) 放在构造函数中更好的方法使用箭头功能声明 openDrawer 方法：

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

Answer 3

给大家说清楚，当使用ES6 class（而不是React.createClass）时，你必须在构造函数中将方法绑定到this。

例子

class Search extends Component {

    constructor(props) {
        super(props);

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

        this.openDrawer = this.openDrawer.bind(this); //bind this to openDrawer
    } 
}

注意：我想我会添加这个答案，因为标记为正确的答案谈到恢复到 React.createClass。评论中也提到了它，但不是很清楚。

此引用在方法中未定义

this refs is getting undefined in method

react-native