todoList案例react版本:鼠标移入效果

鼠标移入事项时，事项所在行背景色变为浅灰色，且显示删除按钮。
鼠标移出事项时，事项所在行背景色变为白色，且不显示删除按钮。

对此，有两种实现方式，

1. css实现
2. js实现

css实现

代码变更涉及的文件有，

1. Item/index.jsx
2. Item/index.css

Item/index.jsx（Item组件）

变动部分：<button className="btn btn-danger" style={{display:'none'}}>删除</button>。

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

export default class Item extends Component {

  handleChange = (id) => {
    return (event) => {
      this.props.checkTodo(id,event.target.checked);
    }
  }

  render() {
    const {id,title,done} = this.props;
    const {handleChange} = this;
    return (
      <li>
        <label>
          <input type="checkbox" defaultChecked={done} onChange={handleChange(id)}/>
          <span>{title}</span>
        </label>
        <button className="btn btn-danger">删除</button> 
      </li>
    )
  }
}

Item/index.css（Item组件）

变动部分： li:hover{ background: #ddd; } 和 li:hover button{ display: block!important; }。

li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}
  
li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none!important;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

li:hover{
  background: #ddd;
}
li:hover button{
  display: block!important;
}

js实现

代码更改涉及的文件有，

1. Item/index.jsx，即Item组件

Item/index.jsx（Item组件）

鼠标移入时，状态数据isMouseEnter置为true，li标签背景色设置为浅灰色，显示删除按钮；
鼠标移出时，状态数据isMouseEnter置为false，li标签背景色设置为白色，不显示删除按钮。

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

export default class Item extends Component {

  state = {
    isMouseEnter:false
  }

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

  handleChange = (id) => {
    return (event) => {
      this.props.checkTodo(id,event.target.checked);
    }
  }

  render() {
    const {isMouseEnter} = this.state;
    const {id,title,done} = this.props;
    const {handleChange,handleMouse} = this;
    return (
      <li 
        onMouseEnter={handleMouse(true)} 
        onMouseLeave={handleMouse(false)}
        style={{background:isMouseEnter?'#ddd':'white'}}
      >
        <label>
          <input type="checkbox" defaultChecked={done} onChange={handleChange(id)}/>
          <span>{title}</span>
        </label>
        <button className="btn btn-danger" style={{display:isMouseEnter?"block":"none"}}>删除</button> 
      </li>
    )
  }
}

相关链接

todoList案例（react版本）之搭建静态页面
todoList案例（react版本）之初始化列表
todoList案例（react版本）之添加todo
todoList案例（react版本）之勾选/去勾选todo

这篇好文章是转载于：学新通技术网