这个refs在方法中未定义

Question

我想在我的项目https://github.com/rt2zz/react-native-drawer中使用这个插件.我可以正确地运行示例,但有问题集成它.

我在方法openDrawer中遇到错误."无法读取未定义的属性抽屉"

我猜我没有以正确的方式定义和使用该类,因为它应该是(我是javascript OOP的新手),例如它使用React.createClass({不像我的扩展Component和构造函数.

我班的相关代码如下.

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

有一个更好的方法,而不是this.openDrawer = this.openDrawer.bind(this)使用箭头函数使用构造函数声明openDrawer方法:

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

Answer 2

我认为如果你回来使用createClass是最好的.ES6创建类(extends)的方法与createClass相比没有什么缺点:方法是未绑定的(即"this"不一定指向对象),也不能使用非常有用的mixins.未绑定的方法是您遇到的问题.如果您可以控制调用方法的位置并绑定方法,您也可以解决它(例如在javascript中查找方法绑定:http://www.smashingmagazine.com/2014/01/understanding-javascript -function-prototype-bind /)

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. 评论中也提到了它，但不太清楚。