React 入门：实战案例 TodoList Item鼠标悬浮效果-Toy模板网

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

本文实现鼠标悬浮到 Todo 记录上时的样式，以及悬浮到 Item 组件 UI 上时，显示【删除】按钮，鼠标离开时隐藏【删除】按钮。

目标实现效果

react鼠标悬浮事件,React 学习实战笔记,react.js,javascript,前端

实现思路

本文通过给事件处理来实现。（如果你对 React 的事件处理不了解，请阅读本专栏前面的【事件处理】章节）

onMouseEnter：当鼠标悬浮到某个元素上时，会触发该事件。
onMouseLeave：当鼠标从某个元素上离开时，会触发该事件。

当然，通过 CSS 也可以实现。此处不做讲解。

实现步骤

第一步：Item 组件中定义一个 mouse 的 state 属性

在 Item 组件中定义一个 mouse 的 state 属性，用来存储鼠标悬浮状态，代码片段如下：

// src/components/Item/index.jsx

state = { mouse: false };

第二步：定义悬浮事件回调

在 Item 组件中定义鼠标悬浮事件回调处理方法，用来控制鼠标悬浮和离开某个 Todo Item 时的样式，及【删除】按钮的显示与隐藏，代码片段如下：

// src/components/Item/index.jsx

// 定义鼠标悬浮回调函数【注意：用到了高阶函数】
handleMouse = (flag) => {
  return () => {
    this.setState({ mouse: flag });
  };
};

第三步：绑定事件处理，及悬浮样式控制

给 Todo Item 组件的 DOM 绑定悬浮事件处理；
通过状态控制 Todo Item 组件的样式。

代码片段如下：

// src/components/Item/index.jsx

render() {
    const { name, done } = this.props;
    const { mouse } = this.state;
    return (
      <li
        style={{ backgroundColor: mouse ? "#eee" : "#fff" }}
        onMouseEnter={this.handleMouse(true)}
        onMouseLeave={this.handleMouse(false)}
      >
        <label className="container">
          <input type="checkbox" defaultChecked={done} />
          <span>{name}</span>
        </label>
        <button
          className="btn btn-danger btn-sm"
          style={{ display: mouse ? "block" : "none" }}
        >
          删除
        </button>
      </li>
    );
  }

至此，完成了 Todo Item 的鼠标悬浮效果。文章来源地址https://www.toymoban.com/news/detail-523539.html

完整代码

Item 组件完整代码

// src/components/Item/index.jsx

import React, { Component } from "react";
import "./index.css";

export default class Item extends Component {
  state = { mouse: false };

  handleMouse = (flag) => {
    return () => {
      this.setState({ mouse: flag });
    };
  };

  render() {
    const { name, done } = this.props;
    const { mouse } = this.state;
    return (
      <li
        style={{ backgroundColor: mouse ? "#eee" : "#fff" }}
        onMouseEnter={this.handleMouse(true)}
        onMouseLeave={this.handleMouse(false)}
      >
        <label className="container">
          <input type="checkbox" defaultChecked={done} />
          <span>{name}</span>
        </label>
        <button
          className="btn btn-danger btn-sm"
          style={{ display: mouse ? "block" : "none" }}
        >
          删除
        </button>
      </li>
    );
  }
}