5 Reactjs 处理事件

╰+哭是因爲堅強的太久メ 2023-02-27 08:08 16阅读 0赞

HTML：

<button οnclick="activateLasers()"> Activate Lasers</button>

在 React 中略有不同：

<button onClick=\{activateLasers\}>  Activate Lasers</button>

另一个区别是，在 React 中你不能通过返回 false. 必须明确调用 preventDefault 。

例如，对于纯 HTML ，要阻止链接打开一个新页面的默认行为，可以这样写：

<a href="\#" οnclick="console.log('The link was clicked.'); return false">Click me</a>

在 React 中, 应该这么写:

function ActionLink() \{

function handleClick(e) \{

e.preventDefault();

console.log('The link was clicked.');

\}

return (

<a href="\#" onClick=\{handleClick\}> Click me </a>

);

\}

这里， e 是一个合成的事件。

当使用一个 [ES6 类][ES6] 定义一个组件时，通常的一个事件处理程序是类上的一个方法。例如， Toggle 组件渲染一个按钮，让用户在 “ON” 和 “OFF” 状态之间切换：

class Toggle extends React.Component \{

constructor(props) \{

super(props);

this.state = \{isToggleOn: true\};

// 这个绑定是必要的，使\`this\`在回调中起作用

this.handleClick = this.handleClick.bind(this);

\}

handleClick() \{

this.setState(prevState => (\{ isToggleOn: !prevState.isToggleOn\}));

\}

render() \{

return (

<button onClick=\{this.handleClick\}>        \{

this.state.isToggleOn ? 'ON' : 'OFF'\}

</button>

);

\}\}

ReactDOM.render(

<Toggle />,

document.getElementById('root'));

在JSX回调中你必须注意 this 的指向。 在 JavaScript 中，类方法默认没有 [绑定][Link 1] 的。如果你忘记绑定 this.handleClick 并将其传递给onClick，那么在直接调用该函数时，this会是 undefined 。

## **将参数传递给事件处理程序** ##

在循环内部，通常需要将一个额外的参数传递给事件处理程序。 例如，如果 id 是一个内联 ID，则以下任一方式都可以正常工作：

<button onClick=\{(e) => this.deleteRow(id, e)\}>Delete Row</button>

<button onClick=\{this.deleteRow.bind(this, id)\}>Delete Row</button>

上述两行代码是等价的，分别使用

[ES6]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes
[Link 1]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关 reactjs代码示例：事件处理

该代码是一个使用React框架创建的页面，包含一个名为Demo的组件，该组件具有两个输入框和一个按钮。点击按钮或失去焦点时，会弹出相应输入框的值。该代码同时引入了React、R

我就是我/ 2024年02月17日 13:35/ 0 赞/ 19 阅读

相关 reactjs中的事件处理

> (1).通过onXxx属性指定事件处理函数(注意大小写) > a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性

系统管理员/ 2023年10月02日 18:07/ 0 赞/ 21 阅读

相关 reactjs onClick绑定点击事件的正确写法

![在这里插入图片描述][913d94343a3d4987b9eb2a134ef6273b.png_pic_center] [913d94343a3d4987b9eb2a1

阳光穿透心脏的1/2处/ 2023年09月28日 16:50/ 0 赞/ 7 阅读

相关 reactJs 基础

react不是一个完整的mvc,mvvm框架。 react跟web components 不冲突背景原理：基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每

不念不忘少年蓝@/ 2023年08月17日 16:20/ 0 赞/ 150 阅读

相关 5 Reactjs 处理事件

HTML： <button οnclick="activateLasers()"> Activate Lasers</button> 在 React 中略有不同： <bu

╰+哭是因爲堅強的太久メ/ 2023年02月27日 08:08/ 0 赞/ 17 阅读

相关事件处理-事件流

事件流----描述的是从页面中接受事件的顺序。 IE----事件冒泡流 Netscape----事件捕获流事件

末蓝、/ 2022年06月11日 08:29/ 0 赞/ 313 阅读

相关 android事件处理，把事件通知到焦点窗口，(5)

五，接下来的问题是InputDispatch是怎么把事件通知到到焦点窗口InputTarget的呢？先看下InputTarget的定义， InputDispatcher.

矫情吗；*/ 2022年06月08日 07:53/ 0 赞/ 149 阅读

相关 Qt事件处理(二)——事件处理链

目录目录前言事件处理链原理描述 ignore和accept 代码总结前言

向右看齐/ 2022年06月04日 08:57/ 0 赞/ 348 阅读

相关事件处理

事件循环 JS运行的环境称之为宿主环境。执行栈：call stack，一个数据结构，用于存放各种函数的执行环境，每一个函数执行之前，它的相关信息会加入到执行栈。

小灰灰/ 2021年12月12日 11:59/ 0 赞/ 339 阅读

相关 JavaSwing_5.3: 事件处理

本文链接: [http://blog.csdn.net/xietansheng/article/details/78389255][http_blog.csdn.net_xie

秒速五厘米/ 2021年09月22日 09:28/ 0 赞/ 256 阅读