这个 refs 在方法中变得未定义 [英] this refs is getting undefined in method

问题描述

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

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

我猜我没有以正确的方式定义和使用类(我是 javascript OOP 的新手)，因为在示例中它使用 React.createClass({ 不像我的作为扩展组件并具有构造函数.

我班的相关代码如下.

class Search extends Component {构造函数(道具){超级(道具)；this.state = {isLoading: 真,数据源:新的 ListView.DataSource({rowHasChanged: (row1, row2) =>第 1 行 !== 第 2 行})};}打开抽屉(){this.refs.drawer.open()}getInitialState(){返回 {drawerType: '覆盖',}}

渲染是

render() {如果(this.state.isLoading){返回 this.renderLoadingView();}var controlPanel = <MyControlPanel closeDrawer={() =>{this.refs.drawer.close()}}/>返回 (<查看><视图样式={styles.topBar}><抽屉参考 =抽屉"><我的主视图/></抽屉><Text style={styles.topBarMenu}>&#9776;</Text><Text style={styles.topBarTitle}>เงินปันผล</Text><Text style={styles.topBarRight}></Text></查看>

解决方案

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

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>

解决方案

I think it's best if you come back to using createClass . The ES6 way of creating classes (extends) has few disadvantages over createClass : the methods are unbound (i.e. "this" does not necessarily points to the object), also you cannot use mixins which are pretty useful. The unbound methods is the problem you are experiencing. You can also workaround it in case you have control over the place where the method is called and bind the method (look for method binding in javascript for example here: http://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/ )

这篇关于这个 refs 在方法中变得未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！