处理用户事件

3 分钟

事件让你可以运行代码以响应应用程序中的用户操作。由于 JSX 是在 JavaScript、XML 和 HTML 的基础上构建的，因此添加事件侦听器看起来相对熟悉。

你需要将属性添加到 HTML，以指示要处理的事件的名称。例如，如果希望在某个按钮处于选中状态时使用 alert 显示一条消息，则可以使用以下代码：

class Demo extends React.Component {
    render() {
        <button onClick={ () => alert('Hello, world!') }>Click me!</button>
    }
}

正如你所料，我们也可以创建一个函数来侦听事件。将函数添加到组件。然后，借助用于 alert 的同一语法来调用它。

class Demo extends React.Component {
    displayMessage() {
        alert('Hello, world!');
    }

    render() {
        <button onClick={ () => displayMessage() }>Click me!</button>
    }
}

我们还可以根据需要将参数传递到事件处理程序。

class Demo extends React.Component {
    displayMessage(message) {
        alert(message);
    }

    render() {
        <button onClick={ () => displayMessage('Clicked button!') }>Click me!</button>
    }
}

处理用户事件

反馈