鼠标移入事项时,事项所在行背景色变为浅灰色,且显示删除按钮。
鼠标移出事项时,事项所在行背景色变为白色,且不显示删除按钮。
对此,有两种实现方式,
- css实现
- js实现
css实现
代码变更涉及的文件有,
- Item/index.jsx
- 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实现
代码更改涉及的文件有,
- 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