React之Arco组件：Switch

夏少白

已于 2022-09-02 11:41:42 修改

阅读量603

点赞数

分类专栏： React!前进四！！！文章标签： javascript 前端 html

于 2022-09-02 11:38:58 首次发布

本文链接：https://blog.csdn.net/zhao19958111/article/details/126659476

版权

本文介绍如何利用React和Arco组件创建Switch开关，通过改变button样式实现开关效果。文章详细讲解了设计思路，包括简化代码的步骤，并重点总结了通过变量控制class以灵活改变样式的技巧，以及实现小点动态运动的方法。

摘要由CSDN通过智能技术生成

设计思路

本质上switch就是一个button，通过改变其button样式，就达到开关的效果，最终成果如下

简化代码

swtich.tsx

import React,{useState} from "react";

function Switch(){

    // 创建本地的checked 的state，用于控制开关关闭或开始
    const [checked, setChecked] = useState<boolean>(false)


    // Switch点击事件
    const onHandleClick: React.MouseEventHandler<HTMLButtonElement> = (event => {
        setChecked(!checked);
    })

    // 通过checked给予classname
    const className = checked ? 'arco-switch-checked' : ''

    return (
        <button
        className={'arco-switch ' + className}
        onClick={onHandleClick}
        role="switch"
        type="button"
        aria-checked={checked}
        >
            <div className&