如何使一个通用功能仅在反应中对单击的事件起作用？答案

【问题标题】：How do I make a common function work for a clicked event only in react?如何使一个通用功能仅在反应中对单击的事件起作用？
【发布时间】：2026-01-10 03:25:01
【问题描述】：

我有两个字段密码和密码。我想在每个字段上显示和隐藏密码，但是单击一个字段的显示图标不应显示另一个字段的值。我对两个 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>

我的状态声明是-

 const [toggle, setToggle] = useState(false)

我的功能是-

function showPassword() {
    setToggle(!toggle)
  }

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

【问题讨论】：

您是否对两个字段使用相同的状态？不太清楚是什么问题，但万一你应该使用两种不同的状态
将每个字段的状态分别保存在状态上[或]创建2个状态来管理这两个字段状态。
@AlfredoLipari 我想只使用一种状态。始终为每个字段声明新状态是不可行的，尤其是当您有大量相似字段时。
@SarunUK 你能告诉我如何实施你的第一个建议吗？
创建了一个示例演示 - codesandbox.io/s/affectionate-poitras-unvv7?file=/src/App.js

标签： javascript reactjs

【解决方案1】：

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

 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)
  }

【讨论】：