react 密码输入框小眼睛

在 React 中实现密码输入框小眼睛的方法如下：

1. 首先，需要定义一个状态来判断密码输入框是否显示密码，例如：

const [showPassword, setShowPassword] = useState(false);

2. 在密码输入框中添加一个复选框，用于控制密码显示与隐藏：

<label>
  <input type="checkbox" onChange={() => setShowPassword(!showPassword)} />
  Show Password
</label>

3. 在密码输入框的类型属性中根据状态来决定显示或隐藏密码：

<input type={showPassword ? "text" : "password"} />

完整的代码如下：

import React, { useState } from "react";

function PasswordInput() {
  const [showPassword, setShowPassword] = useState(false);

  return (
    <div>
      <label>
        Password:
        <input type={showPassword ? "text" : "password"} />
      </label>
      <br />
      <label>
        <input type="checkbox" onChange={() => setShowPassword(!showPassword)} />
        Show Password
      </label>
    </div>
  );
}

export default PasswordInput;