React学习之事件处理

￡神魔★判官ぃ 2022-12-01 12:27 163阅读 0赞

**说明：本系列所有demo代码的github地址为：[https://github.com/Brucewu998/react.js-learning][https_github.com_Brucewu998_react.js-learning]，笔者会不断更新这些代码，本篇代码在目录下demo-06文件夹下。**

我们知道，传统HTML的DOM包含了各种各样的事件处理，例如鼠标点击事件onclick：

在HTML中应用：

<button onclick="handleClick"></button>
    <script>
        function handleClick(e) {
            console.log("Click button!")
        }
    </script>

在JavaScript中应用：

<button id="click-button"></button>
    
    <script>
        let button = dpcument.getElementById("click-button");
        button.onclick = function(){
            console.log("Click button!")
        }
    </script>

React中也包含了鼠标处理事件，与传统的HTML鼠标处理事件相似，但在语法上稍微有点不同：

*  React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
 *  使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

这里同样以上面的例子为例，在React中，鼠标的点击事件应该如下表示：

function handleClick(e) {
        e.preventDefault();
        console.log("Click button!");
    }
    function ClickButton() {
        return <button onClick={handleClick}></button>
    }

在React中，还存在另一个不同，就是不能通过返回false的方式组织默认行为；而是必须显示的使用preventDefault。

下面来看一个具体的鼠标事件点击例子：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="../build/react.dev.js"></script>
        <script src="../build/react-dom.dev.js"></script>
        <script src="../build/brower.min.js"></script>
        <title>Demo-8</title>
    </head>
    <body>
        <div id="demo-8"></div>
        <script type="text/babel">
            class Toggle extends React.Component {
                constructor(props) {
                    super(props);
                    this.state = {
                        isToggleOn: true
                    };
                    this.handleClick = this.handleClick.bind(this);
    
                }
    
                handleClick() {
                    this.setState(state => ({
                        isToggleOn: !state.isToggleOn
                    }));
                }
    
                render() {
                    return (
                        <button onClick={this.handleClick} className="button">
                            {this.state.isToggleOn ? "ON" : "OFF"}
                        </button>
                    )
                }
            }
    
            ReactDOM.render(
                <Toggle />,
                document.getElementById("demo-8")
            )
        </script>
    </body>
    </html>
    <style>
        .button {
            width: 10vw;
            height: 3vh;
            background: -webkit-linear-gradient(45deg, rgba(255, 0, 0,.5), rgba( 255, 165, 0, 0.5),rgba(255, 255, 0,.5),rgba(0, 255, 0,.5),rgba(0, 127, 255,.5),rgba(0, 0, 255,.5),rgba(139, 0, 255,.5));
            border-radius: 6px;
            color:rgba(2, 88, 248)
        }
    </style>

上面的代码中，对handleClick方法重新绑定了this，是因为在JavaScript中，class的方法默认不会绑定this。将其传入onClick，调用的this值为undefined。

上面代码运行结果：

![20200827103752772.png][]    ![20200827103814301.png][]

上一篇：**[React学习之state与生命周期][React_state]**

[https_github.com_Brucewu998_react.js-learning]: https://github.com/Brucewu998/react.js-learning
[20200827103752772.png]: https://img-blog.csdnimg.cn/20200827103752772.png
[20200827103814301.png]: /images/20221123/1347dffac9314ef6a0f30436eb27121d.png
[React_state]: https://blog.csdn.net/qq_37338983/article/details/108230989