Javascript 按下“反应本机”按钮不工作

我正在尝试将函数

handleClick

绑定到我的按钮

onPress

。但它不起作用。当我刷新页面时，我没有点击按钮就收到了警报，在我关闭警报并点击按钮后，什么也没有发生

我的代码是：

class ActionTest extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      thename: 'somename'
    };
  }

  handleClick(){
    alert('Button clicked!');
  }

    render(){
      return(
        <View>
          <Button
           onPress={this.handleClick()}
           title="Click ME"
           color="blue"
          />
        </View> 
        );
    }
}

类ActionTest扩展组件{
建造师（道具）{
超级（道具）；
this.state={
名字：“某物名”
};
}
handleClick（）{
警报（'点击按钮！'）；
}
render（）{
返回(
);
}
}

我也收到了警告：

---

我做错了什么？

当handleClick呈现为您的

onPress={this.handleClick（）}

---

请尝试

onPress={this.handleClick}

将函数作为回调传递给它

更新您的代码！你应该传一封推荐信

<Button
       onPress={this.handleClick}
       title="Click ME"
       color="blue"
      />

---

首先将单击处理程序定义为箭头函数。这样，就不需要再绑定函数了。您的功能如下所示：

handleClick = () => {
    alert('Button clicked!');
}

然后在

标记中使用此功能，如下所示：

<Button
 onPress={this.handleClick}
 title="Click ME"
 color="blue"
/>

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

---

当react native检测到一个点击事件并想要通知您时，它会调用

onPress

属性作为一个函数。因此，您必须为

onPress

prop提供函数，如：

onPress={this.handleClick}

这将

onPress

连接到

handleClick

方法。但是如果您想在

handleClick

中调用其他方法，并且需要“

this

object”，您可以像这样传递

handleClick

方法：

<Button
 onPress={this.handleClick}
 title="Click ME"
 color="blue"
/>

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

---

祝您好运

如果您在类的作用域之外定义了您的函数，那么您也不会在处理程序函数中使用

这个

关键字

像

//函数移到了这里
常量handleClick=（）=>{
警报（'点击按钮！'）；
}
类ActionTest扩展了组件{
建造师（道具）{
超级（道具）；
this.state={
名字：“某物名”
};
}
render（）{
返回(
);
}
}

你能试试吗

class ActionTest extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      thename: 'somename'
    };
  }

  handleClick=()=>{
    alert('Button clicked!');
  }

    render(){
      return(
        <View>
          <Button
           onPress={this.handleClick}
           title="Click ME"
           color="blue"
          />
        </View> 
        );
    }
}

类ActionTest扩展组件{
建造师（道具）{
超级（道具）；
this.state={
名字：“某物名”
};
}
handleClick=（）=>{
警报（'点击按钮！'）；
}
render（）{
返回(
);
}
}

我们应该传递函数引用，而不是在呈现时直接调用它：

试试这个：

onPress={this.handleClick}

---

当组件呈现您想要执行的操作时，您正在调用handleclick函数。因此，通过这种方式，它将是一个回调，并且仅在onPress i触发时运行该函数。您更改了什么，为什么它解决了问题？