不知道我在做什么错 - 获取不是功能错误

我不知道我在做什么错，但我有我的组件内的几个功能。但是，我无法将其中的某个功能作为道具传递，因此我收到了this.nextScene不是函数。不知道我在做什么错 - 获取不是功能错误

下面是从我的组件片段，我已经注释掉那里我遇到的问题：

nextScene() { 
    this.refs.navigator.push('browse'); 
    } 

    renderNavigationView() { 
    return (
     <View style={styles.drawer}> 
     <Touchable 
      onPress={this.nextScene()}  //issue here, "this.nextScene is not a function" 
     > 
      <View style={styles.container}> 
      <Text style={styles.title}>Browse</Text> 
      </View> 
     </Touchable> 
     <Touchable> 
      <View style={styles.container}> 
      <Text style={styles.title}>Button</Text> 
      </View> 
     </Touchable> 
     </View> 
    ); 
    } 

    render() { 
    return (
     <DrawerLayoutAndroid 
     ref="drawer" 
     drawerWidth={300} 
     drawerPosition={DrawerLayoutAndroid.positions.Left} 
     renderNavigationView={this.renderNavigationView}> 
     <Navigator 
      ref="navigator" 
      configureScene={(route) => { 
      if (Platform.OS === 'android') { 
       return Navigator.SceneConfigs.FloatFromBottomAndroid; 
      } 
      } } 
      initialRoute={{}} 
      renderScene={this.renderScene} 
      /> 
     </DrawerLayoutAndroid> 
    ); 
    }

谢谢！

来源

2016-10-20 user1354934

我想你想传递的参考，而不是调用 - 你也可能需要结合本或使用箭头功能，因为'this'并不像它的窗口 – Li357

嗨正确的上下文。所以，如果我尝试'this.nextScene.bind（this）'，我得到一个'不能读取属性'绑定'的undefined':( – user1354934

如果你看看你呈现组件，并在renderNavigationView道具：

renderNavigationView={this.renderNavigationView}

这似乎很好，但由于在功能this上下文window默认情况下，this指window在renderNavigationView。考虑你的onPress事件处理程序：

onPress={this.nextScene()}

由于您使用this.nextScene()和this指window的功能，你有效地试图做window.nextScene不存在，从而引发错误。（还要注意，这是一个调用 - 不是引用，删除括号）。

所以，如果我尝试this.nextScene.bind(this)，我得到一个cannot read property 'bind' of undefined

这是因为该功能是不确定的，因为window.nextScene不存在。为了解决这个问题，使用Function.prototype.bind到this正确绑定在都renderNavigationView和nextScene：

renderNavigationView={this.renderNavigationView.bind(this)}

bind确实在这种情况下设置的内容在功能this上下文。由于this这里指的是该类，该类将用于执行应该正常工作的nextScene方法。你也必须使用绑定在nextScene因为里面nextScene我们要this来引用类，不window：

onPress={this.nextScene.bind(this)}

来源

2016-10-20 03:42:26

哇！非常感谢！这个解释真的帮助我了解我哪里出错了。 – user1354934

@ user1354934没问题，欢呼声！ –

利用冬天在他的回答中指出bind方法的另一种选择是使用箭头功能它会自动将this绑定到您的父上下文。

class MyComponent extends React.Component { 
    clickHandler = (e) => { 
    // do stuff here 
    } 

    render() { 
    return (
     <button onClick={this.clickHandler}></button> 
    ) 
    } 
}

来源

2016-10-20 03:46:43

不错！谢谢 – user1354934

Nit-pick：箭头函数不会自动绑定this，它们甚至不会绑定它。因为它们不绑定它，所以'this'引用封闭的上下文。 – Li357

嗯......我不确定。我会看看那个。由于箭头函数仍然是一个函数，它的工作方式似乎是内部它必须绑定到父上下文...如果它没有绑定它将会像声明一个普通的匿名函数一样工作，即使你没有明确地绑定它，仍然有它自己的上下文，一个不是父级。我要去看看这个。 –

不知道我在做什么错 - 获取不是功能错误

回答

相关问题