reactjs - 如何使用 React 中的单个函数独立更改 2 个不同的变量？

Question

我是 React 新手，我有一个简短而愚蠢的问题，但我糟糕的措辞使得我无法通过搜索找到答案。

基本上，我有 2 个密码字段。我想独立地显示和隐藏每一个，但我想要一种更优雅的方式，而不是拥有 2 个不同的函数和它们自己的变量，如下所示：

  const [showPassword1, setShowPassword1] = useState(false);
  const [showPassword2, setShowPassword2] = useState(false);

  const togglePasswordVisiblity1 = () => {
    setShowPassword1(showPassword1 ? false : true);
  };
  const togglePasswordVisiblity2 = () => {
    setShowPassword2(showPassword2 ? false : true);
  };

使用下面的相应按钮：

<span onClick={togglePasswordVisiblity1}>Show/Hide</span>
<span onClick={togglePasswordVisiblity2}>Show/Hide</span>

我确信有一种方法可以将它们重新组合成一个函数，该函数可以根据span单击的变量更改正确的变量，但是我没有任何运气找到语法。再次抱歉这个问题，希望能尽快得到答复！

在此先感谢您的帮助。

标签： reactjs

Answer 1

您可以尝试使用数组作为状态。检查这个沙盒演示：

import React, { useState } from "react";

export default function App() {
  const [showPassword, setShowPassword] = useState([false, false]);

  return (
    <div className="App">
      <button
        onClick={() => setShowPassword([!showPassword[0], showPassword[1]])}
      >
        {JSON.stringify(showPassword[0])}
      </button>
      <button
        onClick={() => setShowPassword([showPassword[0], !showPassword[1]])}
      >
        {JSON.stringify(showPassword[1])}
      </button>
    </div>
  );
}

通过将状态更新提取到函数中来重构版本：

import React, { useState } from "react";

export default function App() {
  const [showPassword, setShowPassword] = useState([false, false]);

  const togglePassword = (idx) => {
    const newShowPassword = [...showPassword];
    newShowPassword[idx] = !newShowPassword[idx]; // toggle
    setShowPassword(newShowPassword); // update the state
  };

  return (
    <div className="App">
      <button onClick={() => togglePassword(0)}>
        {JSON.stringify(showPassword[0])}
      </button>
      <button onClick={() => togglePassword(1)}>
        {JSON.stringify(showPassword[1])}
      </button>
    </div>
  );
}