Reactjs onClick事件处理程序介绍及示例

DebugUsery
1,355 阅读7分钟

详细了解Reactjs的onClick事件处理程序

onClick ReactJS

React中的onClick处理程序使你能够调用一个函数，并在应用程序中的元素被点击时执行一个动作。它是任何React应用程序的基石。在讨论ReactJs的onClick事件之前，首先让我们了解什么是事件处理程序。

事件处理程序

一般来说，在JavaScript中，事件处理程序被用来确定发射动作后需要的动作，如点击任何按钮或改变文本输入。用户可以通过事件处理程序与我们的ReactJS应用程序互动。

如果你已经知道如何在HTML和JavaScript中处理事件，那么在ReactJS中处理事件就变得很容易。就像我们在DOM元素中处理事件一样，我们也可以在ReactJs元素中处理事件，除非有例外。

现在让我们适当地讨论一下ReactJs中的onClick事件处理器。

ReactJs中的onClick事件处理程序

每当用户点击一个按钮或我们应用程序中的任何元素，onClick事件就会调用一个函数，而被调用的函数会触发一个动作。React中的事件处理程序总是出现在大括号内。

现在让我们看一些例子。

例子

1.在HTML中

<button onclick="newEvent()">

  Hello World!

<button></button>

2.在React应用程序中

<button onClick={newEvent}>

  Hello World!

<button></button>

在React中使用onClick和在HTML中使用onClick有一个重要区别。为了避免HTML中的默认行为，我们只需返回false，但在ReactJS中，preventDefault方法需要被明确调用。

现在让我们看一个代码实现的例子，以避免在HTML中默认从链接中打开一个页面。

<a href="#" onclick="console.log('The link has been clicked.'); return false">

  Click this link

</a>

Now, let us see how we can do this in React Application:

function ActionLink() {

    function handleClick(e) {

      e.preventDefault();

      console.log('The link has been  clicked.');

    }

    return (

      <a href="#" onClick={handleClick}>

        Click this link

      </a>

    );

  }

onClick是我们React应用程序中目标元素的事件处理程序。一般来说，这个事件处理程序指定在该特定元素被调用后必须执行哪个函数。我们将onClick事件处理程序作为属性添加到元素中。

现在我们将看到一个例子，一个函数将被设置为一个按钮的onClick事件；只要按钮被点击，onClick事件将执行该函数，该函数将运行，给我们预期的输出。

import React, { Component } from "react";

import ReactDOM from "react-dom";

class GreetAlert extends Component {

  greetAlert() {

    alert("Welcome to the world of Programming!");

  }

  render() {

    return <button onClick={this.greetAlert}>Click to view the alert!</button>;

  }

}

export default GreetAlert;

在上面的代码中，我们可以看到一个叫做GreetAlert()的函数，这是我们之前定义的，然后我们在我们的react应用程序中的一个按钮元素的onClick属性中传递这个函数。每当用户点击 "Click to view the alert!"按钮，屏幕上方就会弹出一个警报。

在React中，有一些事件叫做合成事件。让我们简单地讨论一下这个话题。

React中的合成事件

合成事件为React应用程序或其界面提供高性能和一致性。

合成事件通过规范化事件来实现一致性，以获得不同浏览器或平台的相同属性。它是浏览器本地事件的一个跨浏览器包装。除了那些在所有浏览器上统一工作的事件，包括preventDefault()和stopPropagation()，作为浏览器的本地事件，它具有相同的属性。通过使用委托，这些合成事件自动实现了高性能。

在类组件中处理事件

在类组件中，事件可以通过在箭头函数中绑定来处理。在ES7的类属性中，方法函数中的绑定是允许的。

用箭头函数绑定

箭头函数没有自己的属性，如arguments、this、super和new.target。箭头函数的语法比普通函数的语法要短。

让我们看一个箭形函数的代码实现例子:

import React, { Component } from "react";

import ReactDOM from "react-dom";

class AlertInput extends Component {

  eventHandlingAlert = event => {

    alert("I have been clicked");

  };

  render() {

    return (

      <button onClick={this.eventHandlingAlert}>Click to view the aler1!</button>

    );

  }

}

export default AlertInput;

现在我们要讨论在功能组件中处理事件的一些方法。

在功能组件中处理事件

  • 使用内联函数

在ReactJs中，我们可以直接在JSX中编写事件处理代码，它主要由内联函数实现。我们只需要将内联函数传递给onClick事件处理程序。有时，如果内联函数的代码内容太多，这些内联函数就无法阅读。这些内联函数主要是用来避免在JSX之外的函数声明。

现在让我们通过一个例子来了解如何在一个函数组件中使用内联函数。

例子:

import React from "react";

const App = () => {

  return (

    <>

      <button onClick={() => alert("Welcome to the world of Programming!")}>Greetings Button</button>

    </>

  );

};

export default App;

  • 更新本地状态

在我们的React应用程序中，有时我们需要更新我们的本地状态；这种状态的更新过程可以在onClick事件处理器中完成。

例子

例如，你的React应用需要你在onClick事件处理程序中更新本地状态。

在这里，在我们的React应用程序中，我们有一个名为count的本地状态，其初始值被设置为0，在我们的组件中，有两个按钮，增量和减量。通过这两个按钮（一个按钮用于增加计数值，另一个按钮用于减少计数值），我们可以使用setCount()修改和更新本地状态的值，如下所示。

import React, { useState } from "react";

const App = () => {

  const [count, setCount] = useState(0);

  return (

    <>

      <p>{count}</p>

      <button onClick={() => setCount(count + 1)}>Increment Button</button>

      <button onClick={() => setCount(count - 1)}>Decrement Button</button>

    </>

  );

};

export default App;

  • 调用多个函数

在同一个onClick事件处理程序中，我们可以传递多个函数。

现在让我们看看一个例子，我们将在同一个onClick事件处理程序中调用两个函数。

例子

如下面的代码所示，一个函数用于显示问候提示，另一个用于更新React应用程序中的本地计数状态。

import React, { useState } from "react";

const App = () => {

  const [count, setCount] = useState(0);

  const greetAlert = () => {

    alert("Welcome to the world of programming!");

  };

  return (

    <>

      <p>{count}</p>

      <button

        onClick={() => {

          greetAlert();

          setCount(count + 1);

        }}

      >

        Multiple function executing button

      </button>

    </>

  );

};

export default App;

  • 传递一个参数

我们可以向事件处理程序传递参数，并在以后使用这些参数。

例子

在下面的示例代码中，我们有一个叫greetAlert的函数，它接受一个名字参数，这个参数被用来在警报输出中显示名字。

import React from "react";

const App = () => {

  const greetAlert = (name) => {

    alert(`Say hello to , ${name}!`);

  };

  return (

    <button

      onClick={() => {

        greetAlert("Mosh");

      }}

    >

     Greet Button

    </button>

  );

};

export default App;

  • 在onClick事件中直接使用合成事件

在onClick事件中，可以直接使用合成事件。

例子

在下面的例子中，我们将通过e.target.value获得按钮的值。

import React from "react";

const App = () => {

  return (

    <button value="Welcome to the world of programming!" onClick={(e) => alert(e.target.value)}>

      Greeting button

    </button>

  );

};

export default App;

自定义组件的事件处理

在ReactJS中，只有DOM元素可以有事件处理程序。如果事件处理程序被传递给NewCustomButton这样的组件，我们将得不到任何响应。在这种情况下，我们该怎么做呢？这里是解决方案。

首先，在NewCustomButton组件中，我们需要渲染DOM元素，然后onClick道具将被传递给它。

让我们看看这个的代码实现。

import React from "react";

const NewCustomButton = ({ onPress }) => {

  return (

    <button type="button" onClick={onPress}>

      Click on me

    </button>

  );

};

 

const App = () => {

  const handleEvent = () => {

    alert("I have been clicked");

  };

  return <NewCustomButton onPress={handleEvent} />;

};

export default App;

结语

在这篇文章中，我们讨论了onClick事件处理程序在ReactJS中起着非常重要的作用。这些事件处理程序被用来确定在点击onClicker事件处理程序所传递的DOM元素后，需要触发哪个动作。在类组件中，事件处理可以通过绑定来完成。我们也可以通过本文前面讨论的不同方式在函数组件中使用onClick事件。

avatar
文章
阅读
粉丝