Javascript 如何使普通函数仅在react中对单击的事件起作用？

我有两个字段password和password。我想在每个字段上显示和隐藏密码，但单击一个字段的显示图标不应显示另一个字段的值。 我对这两个onClick处理程序都使用了公共函数。 我的领域是-

              <div className='form-group'>
                <input
                  type={toggle ? 'text' : 'password'}
                  placeholder='Password'
                />
                <i class='fas fa-eye-slash' onClick={showPassword}></i>
              </div>
              <div className='form-group'>
                <input
                  type={toggle ? 'text' : 'password'}
                  placeholder='Retype Password'
                />
                <i class='fas fa-eye-slash' onClick={showPassword}></i>
              </div>

我的职能是-

---

执行此操作后，每当我单击一个字段显示图标时，都会显示两个字段的密码，反之亦然。

您可以使用不同的值，而不是true和false，在这种情况下，默认值为： （不是很干净，我也没试过，但有道理）

然后你把你在那一刻点击的内容传递给你的函数

  <div className='form-group'>
                <input
                  type={toggle === "password1" ? 'text' : 'password'}
                  placeholder='Password'
                />
                <i class='fas fa-eye-slash' onClick={showPassword("password1"}></i>
              </div>
              <div className='form-group'>
                <input
                  type={toggle === "password2" ? 'text' : 'password'}
                  placeholder='Retype Password'
                />
                <i class='fas fa-eye-slash' onClick={showPassword("password2"}></i>
              </div>

---

两个字段可能使用相同的状态？不太清楚问题出在哪里，但如果您应该在状态上分别使用每个字段的两个不同状态，请[或]创建两个状态来管理这两个字段状态。@AlfredoLipari我只想使用一个状态。始终为每个字段声明新状态是不可行的，特别是当您有大量类似字段时。@SarunUK您能告诉我如何实现您的第一个建议吗？创建了一个示例演示-

function showPassword() {
    setToggle(!toggle)
  }

 const [toggle, setToggle] = useState("password")

  <div className='form-group'>
                <input
                  type={toggle === "password1" ? 'text' : 'password'}
                  placeholder='Password'
                />
                <i class='fas fa-eye-slash' onClick={showPassword("password1"}></i>
              </div>
              <div className='form-group'>
                <input
                  type={toggle === "password2" ? 'text' : 'password'}
                  placeholder='Retype Password'
                />
                <i class='fas fa-eye-slash' onClick={showPassword("password2"}></i>
              </div>

function showPassword(text){
   
   text === "password1" ? "password1" : "password2"
    //if text is already the same restore the default value
   text === toogle && "password" 
    setToggle(text)
  }