第七章 react前端开发-事件处理

本章介绍react的事件处理，所谓事件，通常指的就是点击、鼠标悬浮滑动等等，每个事件都能触发一系列反应，比如点击按钮等等，经常上网的伙伴应该很快就能理解什么是事件了。

React 事件绑定属性的命名采用驼峰式写法，而不是小写

7.1 事件处理初识

下面例子演示了使用时间处理来模拟进行开关的打开与关闭

import React from "react"
import ReactDOM from "react-dom"

class Switch extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isToggleOn: true};

        //这一步必须绑定
        this.handleClick1 = this.Click1.bind(this);
    }

    Click1() {
        this.setState(prevState => ({
            //preState是上一个状态
            isToggleOn: !prevState.isToggleOn
        }));
    }

    render() {
        return (
            <button onClick={this.handleClick1}>
                {this.state.isToggleOn ? '打开' : '关闭'}
            </button>
        );
    }
}

ReactDOM.render(
    <Switch />,
    document.getElementById('root')
);

结果：

 

7.2 向事件处理中传入参数

在事件处理中，通常需要传递额外的参数。比如在列表中要删除一行，需要告诉服务端记录对应的id，在传递参数时，有一个比较重要的概念是事件对象e，下面通过一个例子先直观的理解传递参数的过程

import React from "react"
import ReactDOM from "react-dom"

class Submit extends React.Component{
    constructor(){
        super();
        this.state = {name:'zhangsan'};
    }

    preventPop(name, e){    //事件对象e要放在最后
        e.preventDefault();
        alert(name);
    }

    render(){
        return (
            <div>
                <p>点击下面的提交按钮</p>
                {/* 通过 bind() 方法传递参数。 */}
                <button onClick={this.preventPop.bind(this,this.state.name)}>提交</button>
            </div>
        );
    }
}

ReactDOM.render(
    <Submit />,
    document.getElementById("root")
)

结果：

事件对象e通常用来进行一些控制，如本例中的e.preventDefault()表示阻止某些事，例如点击超链接阻止跳转页面