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

我有一个登录页面，在该页面中，我在焦点上设置边框颜色，我希望即使在单击我的眼睛密码切换时也能保持焦点。一种方法是存储对密码输入字段的引用，并在眼睛的

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

import React，{useRef}来自“React”；
常量眼=（{onClick}）=>眼；
导出默认函数App（）{
const inputRef=useRef（）；
const handleEyeClick=（）=>{
if（输入参考电流）{
inputRef.current.focus（）；
}
};
返回(
);
}

一种方法是存储对密码输入字段的引用，并在眼睛的

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

import React，{useRef}来自“React”；
常量眼=（{onClick}）=>眼；
导出默认函数App（）{
const inputRef=useRef（）；
const handleEyeClick=（）=>{
if（输入参考电流）{
inputRef.current.focus（）；
}
};
返回(
);
}

我不知道使用css或react是否可行，因为我想不出任何解决方案来修复它我不知道使用css或react是否可行，因为我想不出任何解决方案来修复它谢谢你：），上帝保佑你谢谢你：），上帝保佑你