时间戳

首页 > 解决方案 > 为什么这两段 Hello World 代码的行为不同？

reactjs - 为什么这两段 Hello World 代码的行为不同？

问题描述

我是 JavaScript 和 ReactJS 的新手，想了解为什么以下代码的行为不同：

class App extends React.Component
{
  render()
  { 
    return (
      <button onClick={() => {alert("Hello World!");}}>Hello!</button>
    );
  }
};

上面的代码按预期工作。页面上会显示一个按钮，当单击该按钮时会显示一条警告消息“Hello World！” 被展示。

但是以下代码无法按预期工作：

class App extends React.Component
{
  alertText = (text) => {
    alert(text);
  }

  /*
  alertText(text) {
    alert(text);
  }
  */

  render()
  { 
    return (
      <button onClick={this.alertText("Hello World!")}>Hello!</button>
    );
  }
};

我期待这段代码的工作方式类似于第一段代码。取而代之的是两条带有文本“Hello World！”的警报消息。在页面启动后立即连续显示，而无需单击按钮。但在那之后，单击按钮时什么也没有发生。

我的平台是 Ubuntu 20.04.1，nodejs 是 v10.19.0，npx 是 6.14.4，浏览器是 Firefox 80.0 Ubuntu build。npx create-react-app我使用命令创建了 React 应用程序。

标签： reactjs

解决方案

因为代码告诉他们行为不同。onClick期待一个功能。this.alertText("Hello World!")不是函数，您只需立即调用该函数。它应该是

  render()
  { 
    return (
      <button onClick={() => this.alertText("Hello World!")}>Hello!</button>
    );
  }

推荐阅读