CSS或反应单击我的眼睛按钮时保持边框焦点

Question

我有一个登录页面，在该页面上我将边框颜色设置为焦点，即使单击眼睛密码开关I have attached a gif that shows how I loose my focus state when toggling my eye

，我也希望保持焦点

Answer 1

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

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