如何防止出现第二只眼睛图标？

Question

我有一些预先存在的非功能性注册表单代码，它已经有一个 svg 眼睛，这将改变密码输入框中文本的阻塞。然而，在添加一些新逻辑后，我很困惑为什么会出现一个与右侧窗口类似的新黑眼徽标，该徽标仅在输入框后出现，并在单击 OG 图标后经常消失，等等。有什么帮助吗？

<CustomTextField
                  borderRadius={15}
                  borderColor="rgba(50, 54, 69, 1)"
                  width={0.385}
                  height={50}
                  icon={
                    passwordVisible ? (
                      <EyeSlash color={handleIconColor('password')} onClick={togglePasswordVisibility} />
                    ) : (
                      <Eye color={handleIconColor('password')} onClick={togglePasswordVisibility} />
                    )
                  }
                  iconColor={handleIconColor('password')}
                  hintText="Password"
                  hintColor="grey"
                  fontSize={15}
                  obscureText={!passwordVisible}
                  onFocus={() => handleFocus('password')}
                  onBlur={handleBlur}
                  name="password"
                  value={formData.password}
                  onChange={handleChange}
                  onIconClick={togglePasswordVisibility}
                />

const Eye = ({ color, onClick }) => (
  <svg xmlns="http://www.w3.org/2000/svg" style={{fill:color}}width="21" height="21" fill="currentColor" className="bi bi-eye-fill" viewBox="0 0 16 16" onClick={onClick}>
  ...
);

const EyeSlash = ({ color, onClick }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" className="bi bi-eye-slash-fill" viewBox="0 0 16 16" onClick={onClick}>
  ...
);

Answer 1

对于这种情况，您可以使用 onFocus 和 onBlur 事件侦听器。

参考onBlur

参考onFocus

使用此事件处理程序更改状态并配置您的代码。