基于React实现一个todo打勾效果

更新时间：2024年03月24日 09:20:29 作者：阳树阳树

这篇文章主要为大家详细介绍了如何基于React实现一个todo打勾效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

正好呢，最近做的一些东西让我燃起了一些些记录的热情，不能再咕咕了。

背景是我自己做的 landing 项目里有一个实现类似飞书里的 todo 的效果，然后我研究了下飞书，写出来了一个 demo。

我们先来提出几个问题，解决了之后，我们也就实现了一个todo

前面的 icon 用什么来实现。
如何实现文字不可点击，前方icon可点击的效果？
如果有多个元素循环渲染的情况下，我们怎么在点击的时候对单个元素做样式的修改？（React）

这里有几个部分需要来讨论：

首先是整个用什么来实现这个前面的 icon，是使用伪元素，还是使用一个真实的元素？

这里我看飞书直接用的伪元素来实现的，感觉可能是能用 css 解决的问题就没有必要再去用 html 去写了，那么大致实现逻辑如下。

 <div class="todo" id="todo">11111</div>

我们使用伪元素实现这个样式的时候，左侧并不会撑开，也就是说，我们需要去给这个 div 一个靠左的 margin 值。然后再去做具体的打勾框。

    .todo {
        pointer-events: none;
        margin-left: 20px;
    }

    .todo:before {
        content: " ";
        display: inline-block;
        line-height: normal;
        font-size: 16px;
        border: 1px solid black;
        border-radius: 4px;
        background-position: 50%;
        white-space: normal;
        width: 16px;
        height: 16px;
        margin-right: 8px;
        margin-left: -24px;
        box-sizing: border-box !important;
        position: relative;
        cursor: pointer;
        pointer-events: auto;
        top: 2px;
    }

那么上面这些代码，就可以得到下图的展示效果：

是不是看起来已经有了完整的样子啦。

这是我们的 todo 状态，我们还需要实现一个 done的状态，所以还需要额外的 css 去书写，这里需要注意的是，为了交互更加好看，我们在 hover 的时候会让伪元素的样式变蓝。于是增加了如下代码，有了下图所示的效果

    .todo:hover:before {
        border: 1px solid rgb(100, 149, 237);
    }

第二个点就是，我们如何实现一个文字不可点击，前方icon可点击的效果呢？

其实在上面的代码中已经展示出来了，为这个 div设置pointer-events: none;，然后给伪元素设置pointer-events: auto;就可以啦。

这些考虑完之后，我再给你们展示一下点击状态的css咋写的：

    .done {
        text-decoration: line-through;
    }

    .done::before {
        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjU4OSAzLjkwM2wuODA4LjgwOGEuMzUuMzUgMCAwMTAgLjQ5NUw2LjE4IDEwLjQyNWEuMzUuMzUgMCAwMS0uNDk1IDBMMi43MDMgNy40NDRhLjM1LjM1IDAgMDEwLS40OTVsLjgwOC0uODA4YS4zNS4zNSAwIDAxLjQ5NSAwbDEuOTI1IDEuOTI0IDQuMTYzLTQuMTYzYS4zNS4zNSAwIDAxLjQ5NSAweiIgZmlsbD0iIzMzNzBGRiIvPjwvc3ZnPg==);
    }

那么你给这个 div 再加上 done 的类名，就可以得到下图的效果了：

最后呢，如果我们有多个 div，我们如何去做类名的处理呢？

答案是监听点击事件，然后在点击的时候更换类名，代码如下：

    const div = document.getElementById('todo');
    div.addEventListener('click', (target) => {
        const classArr = target.currentTarget.className.split(' ');
        if (classArr.length > 1) {
            target.currentTarget.className = 'todo'
        } else {
            target.currentTarget.className = 'todo done'
        }
    })

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="todo" id="todo">11111</div>
</body>
<script>
    const div = document.getElementById('todo');
    div.addEventListener('click', (target) => {
        const classArr = target.currentTarget.className.split(' ');
        if (classArr.length > 1) {
            target.currentTarget.className = 'todo'
        } else {
            target.currentTarget.className = 'todo done'
        }
    })
</script>
<style>
    .todo {
        margin-left: 20px;
    }

    .todo:before {
        content: " ";
        display: inline-block;
        line-height: normal;
        font-size: 16px;
        border: 1px solid black;
        border-radius: 4px;
        background-position: 50%;
        white-space: normal;
        width: 16px;
        height: 16px;
        margin-right: 8px;
        margin-left: -24px;
        box-sizing: border-box !important;
        position: relative;
        cursor: pointer;
        pointer-events: auto;
        top: 2px;
    }

    .todo:hover:before {
        border: 1px solid rgb(100, 149, 237);
    }

    .done {
        text-decoration: line-through;
    }

    .done::before {
        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjU4OSAzLjkwM2wuODA4LjgwOGEuMzUuMzUgMCAwMTAgLjQ5NUw2LjE4IDEwLjQyNWEuMzUuMzUgMCAwMS0uNDk1IDBMMi43MDMgNy40NDRhLjM1LjM1IDAgMDEwLS40OTVsLjgwOC0uODA4YS4zNS4zNSAwIDAxLjQ5NSAwbDEuOTI1IDEuOTI0IDQuMTYzLTQuMTYzYS4zNS4zNSAwIDAxLjQ5NSAweiIgZmlsbD0iIzMzNzBGRiIvPjwvc3ZnPg==);
    }
</style>

</html>

到此这篇关于基于React实现一个todo打勾效果的文章就介绍到这了,更多相关React todo打勾内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React从Class方式转Hooks详解
这篇文章主要介绍了React从Class方式转Hooks详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-09-09
基于React-Dropzone开发上传组件功能(实例演示)
这篇文章主要介绍了基于React-Dropzone开发上传组件,主要讲述的是在React-Flask框架上开发上传组件的技巧，需要的朋友可以参考下
2021-08-08
React学习笔记之条件渲染（一）
条件渲染在React里就和js里的条件语句一样。下面这篇文章主要给大家介绍了关于React学习记录之条件渲染的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-07-07
React操作DOM之forwardRef问题
这篇文章主要介绍了React操作DOM之forwardRef问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
React router cache route实现缓存页面流程介绍
react-router自身没有路由缓存的特性，在5.x版本之前，我们可以基于react-router-cache-route来实现路由缓存功能。但是react-router 6.x在实现上做了比较大的变化，react-router-cache-route没有提供相应的支持
2023-01-01
十分钟带你快速了解React16新特性
这篇文章主要介绍了十分钟带你快速了解React16新特性,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
教你使用vscode 搭建react-native开发环境
本文记录如何使用vscode打造一个现代化的react-native开发环境，旨在提高开发效率和质量。本文给大家分享我遇到的问题及解决方法，感兴趣的朋友跟随小编一起看看吧
2021-07-07
React实现下拉框的key,value的值同时传送
这篇文章主要介绍了React实现下拉框的key,value的值同时传送方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
在React中实现Vue的插槽功能的示例代码
在 Vue 中,插槽（Slots）允许父组件向子组件传递 HTML 结构,从而实现更灵活的组件复用,具名插槽允许父组件向子组件传递多个不同的 HTML 结构,在 React 中,我们没有直接的插槽概念,但可以通过 props.children 和函数作为 props 来实现类似的功能
2025-01-01
React高阶组件的使用浅析
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React高阶组件使用小结，一起看看吧
2022-08-08

基于React实现一个todo打勾效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具