本小节，我们需要使用鼠标事件，给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}) }
以上两种方式都可以成功实现功能，也能简化代码。
