Question

我刚刚开始使用本机反应，并且在理解上下文所指的this时遇到一些问题。

我在一些教程中看到了这个简单的例子：

class LoginScreen extends React.Component {
  render() {
    return (
      <View>
        <Button onPress={this.buttonAction}></Button>
      </View>)}
  buttonAction() {
    this.setState(...);
  }
}

现在我想构建自己的按钮组件，所以我写了这个MButton.js

class MButton extends React.Component {
  render() {
    return (
      <TouchableOpacity onPress={this.props.onPress}>
        <View>
          <Text>Login</Text>
        </View>
      </TouchableOpacity>
    );}}

并尝试在我的主容器中使用它：

class LoginScreen extends React.Component {
  render() {
    return (
      <View>
        <MButton onPress={this.buttonAction}></MButton>
      </View>)}
  buttonAction() {
    this.setState(...);
  }
}

但现在this内buttonAction()引用了MButton个对象而setState无法调用。

来自web / js背景，这在某种程度上是有道理的，但为什么它首先起作用呢？怎么会这样做呢？我能以某种方式访问父组件吗？或者我应该做一些完全不同的事情？

Answer 1

现在{1}}里面的buttonAction（）是指MButton对象吗？

NO.Its没有引用this对象。

setState不可调用？

您需要将MButton绑定到this

Sol1：

使用 arrow 功能。

buttonAction

Sol2：

在构造函数中：

buttonAction=() =>{
    this.setState(...);
}

Answer 2

class LoginScreen extends React.Component {
    render() {
        return (
            <View>
                <MButton onPress={() => {this.buttonAction()}}>
                </MButton>
            </View>
        )
    }

    buttonAction() {
        this.setState(...);
    }
}

onPress = {（）=＆gt; {this.buttonAction（）}} 在箭头函数的帮助下，我们可以将参数传递给MButton组件（如果你想传递）。

javascript中`this`的行为

2 个答案: