React官方文档--Handling Events

最新推荐文章于 2025-05-07 18:51:08 发布

翻译最新推荐文章于 2025-05-07 18:51:08 发布 · 471 阅读

javaScript 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了React中事件处理的方式，包括事件命名、事件处理函数的定义及使用，并解释了如何阻止默认行为。此外还讨论了在类组件中绑定this的问题以及解决方法。

Handling Events

React元素的事件处理非常类似于对DOM元素添加事件处理，但有一部分的语法不同。
1. React事件使用camelCase来进行命名，而不是小写字母
2. JSX需要传递一个函数作为事件处理函数，而不是一个字符串。

//DOM元素的事件处理函数
<button onclick="activateLaser()">
    Activate Lasers
</button>

//React元素的事件处理函数
<button onClick={activateLasers} >
    Activate Lasers
</button>

另外一个不同是不能够通过返回一个false来阻止默认操作。必须调用preventDefault，比如：

//DOM元素事件处理阻止默认操作
<a href="#" onclick="console.log('The link was clicked.'); return false;">
    Click me
</a>

//React元素
function ActionLink() {
//e是事件的各种信息，是根据W3C标准定义的。不需要考虑浏览器兼容问题
    function handleClick(e) {
        e.preventDefault();
        console.log('The link was clicked.');
    }

    return (
        <a href="#" onClick={handleClick}>
            Click me
        </a>
    )
}

在JSX的回调函数中，要注意this的含义，JavaScript中，类方法并不属于任何运行形式，所以如果忘记绑定类的this给事件处理函数的话，那么this在事件处理函数中会变成undefined。如果你不带()来调用一个方法的时候，必须要绑定类的this给事件处理函数。
如果这样很麻烦的话，可以使用箭头运算符来定义方法。
或者使用箭头运算符来进行回调函数调用。

//property initializer syntax
class LoggingButton extends React.Component {
    handleClick = () => {
        console.log('this is:', this);
    }
}
//arrow function
class LogginButton extends React.Component {
    handleClick() {
        console.log('this is:', this);
    }
    render() {
        return (
            <button onClick={(e) => this.handleClick(e)}>
                Click me
            </button>
        );
    }
}