React实现点击切换组件效果
作者：璐瑶知码li
这篇文章主要为大家详细介绍了如何基于React实现点击切换组件效果，文中的示例代码讲解详细，具有一定的借鉴价值，需要的小伙伴可以学习一下
实现如下组件
组件代码：
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 SwitchTypeindex.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
}
}
若想要实现如上效果，点击不切换左右顺序，只切换选中项，把onClick事件统一成changeActive就可以了
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实现点击切换组件效果的文章就介绍到这了,更多相关React切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！