如何使用反应钩子切换

Posted 2023-05-09

【中文标题】如何使用反应钩子切换

【英文标题】：how to toggle with react hooks

【发布时间】：2021-04-22 02:06:06

【问题描述】：

我有 2 个按钮可以通过那个简单的钩子来切换：

  const [extendDetails, setExtendDetails] = useState(false);
  const handleExtendDetails = () => setExtendDetails(!extendDetails);

  const [extendPictures, setExtendPictures] = useState(false);
  const handleExtendPictures = () => setExtendPictures(!extendPictures);

这些是按钮：

<button onClick=handleExtendDetails>Extend Details</button>
<button onClick=handleExtendPictures>Extend Pictures</button>

是否有某种方法可以命名按钮并使用e 或某种变量，这样我就不需要为每个按钮声明一个钩子，以防我有 20 个按钮而不仅仅是 2 个？

【问题讨论】：

你能把按钮放在一个组件中吗？然后你可以一遍又一遍地重复使用它。

【参考方案1】：

您可以尝试使用定义简单的Object 和target name 组合。

const initialState = () => (
  extendDetails: false,
  extendPictures: false
)

export default function App() 
  const [toggle, setToggle] = useState(initialState())

  const handleToggle = (e) => 
    const  name  = e.target

    setToggle( ...toggle, [name]: !toggle[name] )
  
  return (
    <div>
      <button name="extendDetails" onClick=handleToggle>toggle.extendDetails ? 'Open' : 'Close'  Extend Details</button>
      <button name="extendPictures" onClick=handleToggle>toggle.extendPictures ? 'Open' : 'Close'  Extend Pictures</button>
    </div>
  );

演示链接是here

【参考方案2】：

一种选择是使用数组来代替：

const [toggledButtons, setToggledButtons] = useState(() => Array.from(
   length: 20 ,
  () => false
));

然后你可以做类似的事情

const toggle = (i: number) => () => setToggledButtons(
    toggledButtons.map((current, j) => i === j ? !current : current)
);

<button onClick=toggle(0)>Extend Details</button>
<button onClick=toggle(1)>Extend Pictures</button>

【讨论】：

似乎toggledButtons 已声明但未使用。收到此错误：Type '() => [boolean[], Dispatch>]' 不是数组类型。

原始代码中未显示使用extendDetails 和extendPictures 的位置。将这些变量的用法替换为 toggledButtons[0]、toggledButtons[1] 等。如果您认为这样会使事情更清晰，您甚至可以使用对象而不是数组。

我明白了，这看起来是个不错的解决方案。现在唯一的问题是我将 React 与 TypeScript（tsx 文件）一起使用，我得到唯一的错误消息：Argument of type '(current: any, j: any) => any' is not assignable to parameter of type 'SetStateAction'。类型 '(current: any, j: any) => any' 不可分配给类型 '(prevState: boolean[]) => boolean[]'。

如果你使用的是TS，你需要指明参数的类型。由于toggle 采用数字参数，因此输入参数，即数字：i: number