React实现点击切换组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了React实现点击切换组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

React实现点击切换组件,react.js,前端,前端框架

实现如上组件

组件代码：

import { SwapOutlined } from "@ant-design/icons"
import React, { useState } from "react"
import './index.less'

interface ISwitchTypeProps {
  onChange?: (val) => boolean
  activeKey?: string
  left: { key: string, text: string }
  right: { key: string, text: string }
}
const SwitchType = ({ onChange, left, right, activeKey }: ISwitchTypeProps) => {
  const [data, setData] = useState({
    left,
    right,
    activeKey:activeKey||left.key
  })
  const changeActiveData = () => {
    const activeKey = data.activeKey === left.key ? right.key : left.key
    const changeData = () => {
      setData({
        left: { ...data.right },
        right: { ...data.left },
        activeKey
      })
    }
    if (onChange&&onChange(activeKey)) {
      changeData()
    }
    if (!onChange) {
      changeData()
    }
  }

  const changeActive = () => {
    const activeKey = data.activeKey === left.key ? right.key : left.key
    const changeData = () => {
      setData({
        ...data,
        activeKey
      })
    }
    if (onChange&&onChange(activeKey)) {
      changeData()
    }
    if (!onChange) {
      changeData()
    }
  }
  return <div className="switch-type">
    <div className={data.activeKey === data.left.key ? 'type-active' : 'type-data'} onClick={changeActive} key={data.left.key}>{data.left.text}</div>
    <div className="change-icon" onClick={changeActiveData}><SwapOutlined /></div>
    <div className={data.activeKey === data.right.key ? 'type-active' : 'type-data'} onClick={changeActive} key={data.right.key}>{data.right.text}</div>
  </div>
}

export default SwitchType

index.less样式文件

.switch-type {
  display: flex;
  align-items: center;
  color: #B9BCC1;

  .change-icon {
    border-radius: 2px;
    background-color: #F1F3F5;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    flex-shrink: 0;
    margin: 0 8px;
    color: #555961;
    cursor: pointer;
  }

  .type-data {
    cursor: pointer;
  }

  .type-active {
    color: #555961;
    .type-data
  }
}

React实现点击切换组件,react.js,前端,前端框架

若想要实现如上效果，点击不切换左右顺序，只切换选中项，把onClick事件统一成changeActive就可以了文章来源地址https://www.toymoban.com/news/detail-638900.html

import { SwapOutlined } from "@ant-design/icons"
import React, { useState } from "react"
import './index.less'

interface ISwitchTypeProps {
  onChange?: (val) => boolean
  activeKey?: string
  left: { key: string, text: string }
  right: { key: string, text: string }
}
const SwitchType = ({ onChange, left, right, activeKey }: ISwitchTypeProps) => {
  const [data, setData] = useState({
    left,
    right,
    activeKey: activeKey || left.key
  })

  const changeActive = () => {
    const activeKey = data.activeKey === left.key ? right.key : left.key
    const changeData = () => {
      setData({
        ...data,
        activeKey
      })
    }
    if (onChange && onChange(activeKey)) {
      changeData()
    }
    if (!onChange) {
      changeData()
    }
  }
  return <div className="switch-type">
    <div className={data.activeKey === data.left.key ? 'type-active' : 'type-data'} onClick={changeActive} key={data.left.key}>{data.left.text}</div>
    <div className="change-icon" onClick={changeActive}><SwapOutlined /></div>
    <div className={data.activeKey === data.right.key ? 'type-active' : 'type-data'} onClick={changeActive} key={data.right.key}>{data.right.text}</div>
  </div>
}

export default SwitchType

到了这里，关于React实现点击切换组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！