输入密码框默认圆点变为*

Question

问题：在写一个React的网页时，希望当输入密码隐藏时，密码显示的是“*”，但是现在默认显示的是圆点○，该怎么该才能使它显示呢？我使用的是Antd的Input.Password组件写输入密码框；语言是React+typeScript。请各位帮帮忙
代码及页面：

<Input.Password className="register-input-frame-psw" prefix={<img src={Images.icon_mima} alt="icon_password" className="login-input-icon" />}
                        placeholder="请设置登录密码" visibilityToggle={true} iconRender={(visible) => (visible ? <img src={Images.icon_xianshi} /> : <img src={Images.icon_yincang} />)}
                    />

Answer 1

在Antd的Input.Password组件中，可以通过设置 iconRender 属性来自定义密码显示的样式。可以通过使用CSS样式来设置密码的显示方式。

首先，在CSS样式中定义密码显示为星号（*）的样式：

.show-password {
  font-size: 14px;
  line-height: 1.5715;
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

在React组件中引入样式，并将iconRender设置为一个函数，用来渲染自定义的图标。

import React, { useState } from "react";
import { Input } from "antd";
import "./YourComponent.css";

const YourComponent: React.FC = () => {
  const [passwordVisible, setPasswordVisible] = useState(false);

  const handleTogglePassword = () => {
    setPasswordVisible(!passwordVisible);
  };

  const renderPasswordIcon = (visible: boolean) => {
    return (
      <span onClick={handleTogglePassword} className="show-password">
        {visible ? "*" : "●"}
      </span>
    );
  };

  return (
    <Input.Password
      iconRender={(visible) => renderPasswordIcon(visible)}
    />
  );
};

export default YourComponent;