第二十二章案例TodoList之鼠标事件-Toy模板网

这篇具有很好参考价值的文章主要介绍了第二十二章案例TodoList之鼠标事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本小节，我们需要使用鼠标事件，给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.props
    const {mouseIn} = this.state
    return (
      <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})
  }