css 或 react 单击我的眼睛按钮时保持边框焦点

【问题标题】：css or react Keep border focus when clicking my eye buttoncss 或 react 单击我的眼睛按钮时保持边框焦点
【发布时间】：2020-10-11 18:21:30
【问题描述】：

我有一个登录页面，我在其中设置了焦点的边框颜色，即使我点击我的眼睛密码切换I have attached a gif that shows how I loose my focus state when toggling my eye

，我也想保持焦点

【问题讨论】：

我不知道这是否可以使用 css 或 react ，因为我想不出任何解决方案来解决它

标签： css reactjs sass

【解决方案1】：

一种方法是存储密码输入字段的引用，并在眼睛的onClick 处理程序中调用focus()：

import React, { useRef } from "react";

const Eye = ({ onClick }) => <span onClick={onClick}>eye</span>;

export default function App() {
  const inputRef = useRef();

  const handleEyeClick = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <Eye onClick={handleEyeClick} />
    </div>
  );
}

【讨论】：