9.自定义hook函数实现列表操作栏中按钮”禁用”和”恢复”两种状态的切换代码
时间: 2024-10-28 20:06:25 浏览: 0
在React中,你可以使用自定义Hook来管理组件的状态,比如列表操作栏按钮的启用或禁用状态。下面是一个简单的示例,假设我们有一个`useToggleListStatus` Hook,它接受一个初始状态`isDisabled`,并提供两个方法`toggleDisabled`和`setDisabled`来控制这个状态:
```jsx
import { useState } from 'react';
function useToggleListStatus(initialDisabled = false) {
const [disabled, setDisabled] = useState(initialDisabled);
function toggleDisabled() {
setDisabled(!disabled);
}
return {
disabled,
toggleDisabled,
setDisabled // 如果你想外部直接设置状态也可以使用这个方法
};
}
// 使用Hook
const ListOperations = () => {
const { disabled, toggleDisabled } = useToggleListStatus();
return (
<div>
<button onClick={toggleDisabled} disabled={disabled}>
{'{'}[disabled ? '禁用' : '恢复']<'}
</button>
</div>
);
};
```
在这个例子中,当用户点击按钮时,`toggleDisabled`函数会被触发,会改变`disabled`的状态,并相应地更新按钮的文字显示。
阅读全文