React-鼠标事件处理（react doubleclick）

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';

const infoMap = {
    clickAlertInfo: '发生了鼠标单击事件',
    linkPreventInfo: '即将访问百度官网',
    baiduWebsiteInfo: 'http://www.baidu.com',
    gotoBaiduWebsiteInfo: '访问百度官网',
    buttonToAlertInfo: '类事件处理正常',
    buttonToValue: '类的事件',
    callbackAlertInfo: '使用了箭头函数',
    callbackValue: '回调操作',
    eventWithPropsAlertInfo: '传递的参数为:name=',
    eventWithPropsValue: '带参数的事件处理',
    onOffStateAlertInfo: '现有的状态为',
    onOffButtonValue1: '开关按钮(初始为开)',
    onOffButtonValue2: '开关按钮(初始为关)',
    titleInfo: '事件处理的简单示例',
    buttonInfo: '鼠标单击事件示例：',
    buttonValue: '单击鼠标事件',
    linkExInfo: '超链接访问示例：',
    buttonToInfo: '类的事件处理示例：',
    callbackInfo: '回调操作示例：',
    eventWithPropsInfo: '带参数的事件处理示例：',
    onOffStateInfo: '状态的变化示例：',
    preventDefaultInfo: '使用preventDefault阻止默认行为：',
    actionLinkInfo: '单击Link'

}

/*鼠标单价事件处理 */
function onBtnClick(){
    alert(infoMap.clickAlertInfo);
}

/*阻止事件默认行为 */
function PreventLink(){
    function handleClick(){
        alert(infoMap.linkPreventInfo);
    }
    return (
        <a href={infoMap.baiduWebsiteInfo} onClick={handleClick}>{infoMap.gotoBaiduWebsiteInfo}</a>
    );
}

class BtnClickComp extends React.Component {
    constructor(props){
        super(props);
    }
    handleClick2(){
        alert(infoMap.buttonToAlertInfo);
    }
    render() {
        return (
            <button onClick={this.handleClick2}>
                {infoMap.buttonToValue}
            </button>
        );
    }
}

/*使用了箭头函数回调 */
class CallBackBtnClickComp extends React.Component {
    constructor(props){
        super(props);
    }
    handleClick = () => {
        alert(infoMap.callbackAlertInfo);
    }
    render() {
        // 此语法确保 handleClick（）方法内的 `this` 已被绑定
        return (
            <button onClick={(e) => this.handleClick(e)}>
                {infoMap.callbackValue}
            </button>
        );
    }
}

/*在事件处理方法中传递参数 */
class ParamsEventComp extends React.Component {
    constructor(props){
        super(props);
        this.name = props.name;
    }
    passParamsClick(name, e){
        e.preventDefault();
        alert(infoMap.eventWithPropsAlertInfo + " " +name);
    }
    render() {
        return (
            <div>
                {/* 通过箭头?方法传递参数 */}
                <button onClick={(e) => this.passParamsClick(this.name, e)}>
                    {infoMap.eventWithPropsValue}
                </button>
            </div>
        );
    }
}

class ToggleBtnComp extends React.Component {
    constructor(props){
        super(props);
        this.isToggleOn = props.isToggleOn;
        // 为了在回调中使用this，这里的绑定比不可少。
        this.handleClick = this.toggleBtnClick.bind(this);
    }
    toggleBtnClick(isToggleOn, e){
        e.preventDefault();
        alert(infoMap.onOffStateAlertInfo + " " + this.isToggleOn);
        this.isToggleOn = !this.isToggleOn;
        
    }
    render() {
        return (
            <button onClick={(e) => this.toggleBtnClick(this.isToggleOn, e)}>
                {this.isToggleOn ? infoMap.onOffButtonValue1 : infoMap.onOffButtonValue2}
            </button>
        )
    }
}

function ActionLink(){
    // e是合成事件，React根据W3C规范来定义合成事件，开发时无须考虑跨浏览器兼容性问题
    function handleClick(e){
        e.preventDefault();
        alert(infoMap.actionLinkInfo);
    }
    return (
        <a href="#" onClick={handleClick}>
            {infoMap.actionLinkInfo}
        </a>
    )
}

const EventExample = () => {
    return (
        <span>
            <h2>{infoMap.titleInfo} </h2>
            <span>{infoMap.buttonInfo}</span>
            <button onClick={onBtnClick}>{infoMap.buttonValue}</button>
            <hr/>
            <span>{infoMap.linkExInfo}<PreventLink/></span>
            <hr/>
            <span>{infoMap.buttonToInfo}<BtnClickComp/></span>
            <hr/>
            <span>{infoMap.callbackInfo}<CallBackBtnClickComp/></span>
            <hr/>
            <span>{infoMap.eventWithPropsInfo}<ParamsEventComp name={'ls'}/></span>
            <hr/>
            <span>{infoMap.onOffStateInfo}<ToggleBtnComp isToggleOn={true}/></span>
            <hr/>
            <span>{infoMap.preventDefaultInfo}<ActionLink/></span>
        </span>
    );
}
                            
export default EventExample;

效果：