react如何实现toggle
实现 React Toggle 的方法
使用 useState 钩子
通过 React 的 useState 钩子管理 toggle 状态，适合函数组件。
import React, { useState } from 'react';
function ToggleComponent() {
const [isToggled, setIsToggled] = useState(false);
const handleToggle = () => {
setIsToggled(!isToggled);
};
return (
<div>
<button onClick={handleToggle}>
{isToggled ? 'ON' : 'OFF'}
</button>
</div>
);
}类组件实现
适用于类组件，通过 this.state 和 this.setState 管理状态。
import React from 'react';
class ToggleComponent extends React.Component {
constructor(props) {
super(props);
this.state = { isToggled: false };
}
handleToggle = () => {
this.setState(prevState => ({
isToggled: !prevState.isToggled
}));
};
render() {
return (
<div>
<button onClick={this.handleToggle}>
{this.state.isToggled ? 'ON' : 'OFF'}
</button>
</div>
);
}
}使用自定义 Hook
封装 toggle 逻辑为可复用的自定义 Hook。
import { useState } from 'react';
function useToggle(initialValue = false) {
const [value, setValue] = useState(initialValue);
const toggle = () => setValue(!value);
return [value, toggle];
}
function ToggleComponent() {
const [isToggled, toggle] = useToggle(false);
return (
<div>
<button onClick={toggle}>
{isToggled ? 'ON' : 'OFF'}
</button>
</div>
);
}结合 CSS 切换样式
通过状态控制 CSS 类名或内联样式。
function ToggleComponent() {
const [isActive, setIsActive] = useState(false);
return (
<div>
<button
className={isActive ? 'active' : 'inactive'}
onClick={() => setIsActive(!isActive)}
>
Toggle Style
</button>
</div>
);
}使用第三方库
例如 react-switch 或 react-toggle 快速实现 UI 组件。
import React from 'react';
import Switch from 'react-switch';
function ToggleComponent() {
const [checked, setChecked] = useState(false);
return (
<Switch
checked={checked}
onChange={setChecked}
/>
);
}注意事项
- 状态提升：若需跨组件共享状态，将 toggle 逻辑提升至父组件或使用状态管理工具。
- 无障碍：为按钮添加
aria-pressed属性以支持屏幕阅读器。 - 性能：避免在渲染函数中频繁创建新函数，可使用
useCallback优化。
