第二十二章案例TodoList之鼠标事件

news/2024/12/22 22:43:20/

本小节，我们需要使用鼠标事件，给Item组件添加背景颜色，并显示删除按钮。

添加鼠标移入和移出事件

import React, { Component } from 'react'
import "./index.css"
export default class Item extends Component {// 初始化状态数据state = {mouseIn:false}// 鼠标移入事件enterHandle = () => {this.setState({mouseIn:true})}// 鼠标移出事件outHandle = () => {this.setState({mouseIn:false})}render() {const {name,done} = this.propsconst {mouseIn} = this.statereturn (<li onMouseEnter={this.enterHandle} onMouseLeave={this.outHandle}  style={{backgroundColor: mouseIn?'gainsboro':''}}><label><input type="checkbox" defaultChecked={done}/><span>{name}</span></label><button className="btn btn-danger" style={{display:mouseIn?"block":"none"}}>删除</button></li>)}
}

主要的改造点：

初始化一个状态数据，用于控制背景颜色和删除按钮

// 初始化状态数据state = {mouseIn:false}

当值为true的时候，背景颜色变为灰色，删除按钮显示。为false的时候，背景颜色变回白色，删除按钮隐藏。

新增鼠标移入事件处理

// 鼠标移入事件enterHandle = () => {this.setState({mouseIn:true})}

此时修改值为true，背景颜色变为了灰色，删除按钮显示。

新增鼠标移出事件处理

  // 鼠标移出事件outHandle = () => {this.setState({mouseIn:false})}

此时修改值为false，背景颜色变为了白色，删除按钮隐藏。

简化事件代码

之前我们学习过如何简化事件中的代码：使用高阶函数或者内联的箭头函数

使用函数柯里化优化事件回调函数

// 在标签事件里面使用布尔值作为参数传递给回调函数
onMouseEnter={this.mouseHandle(true)} onMouseLeave={this.mouseHandle(false)}// 鼠标移入移出回调函数 mouseHandle = (flag) => {return () => {this.setState({mouseIn:flag})}}

当我们鼠标移入时，传一个true的布尔值，鼠标移出时，传入一个false的布尔值。

使用内联箭头函数优化事件回调函数

// 在标签的事件里面使用布尔值作为参数传递给回调函数
onMouseEnter={()=>this.mouseHandle(true)} onMouseLeave={()=>this.mouseHandle(false)}// 鼠标移入移出回调函数 mouseHandle = (flag) => {this.setState({mouseIn:flag})}