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;

效果：