Question

我有 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？

Answer 1

一种选择是使用数组：

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>

Answer 2

您可以尝试使用定义简单的 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 个答案: