如何以编程方式在 React 中聚焦按钮？

Question

自动对焦对我不起作用，因为我需要它（button2）在单击button1时聚焦，而不是在元素加载时聚焦。这就是我的代码的样子：

const MyComponent = props =>{

    return(<div>
                <button id='button1'>Button1</button>
                <button id='button2'>Button2</button>
           </div>);
}

我尝试使用 ref 但它似乎不适用于按钮，仅适用于文本框等；当我用 an 替换 button2 时，<input>它工作正常：

const MyComponent = props =>{
    const btnRef = useRef()
    const handleClick = ()=>{
        btnRef.current.focus()
    }
    return(<div>
                <button id='button1' onClick={handleClick}>Button1</button>
                <button id='button2'>Button2</button>
           </div>);
}

有没有办法让这种参考方法发挥作用？或者有什么方法可以让按钮以编程方式聚焦？

Answer 1

您走在正确的轨道上，您还需要将 ref 附加到您想要调用的 DOM 元素.focus。

例子：

const MyComponent = () => {
  const btnRef = useRef();

  const handleClick = () => {
    btnRef.current.focus();
  };

  return (
    <div>
      <button id="button1" onClick={handleClick}>
        Button1
      </button>
      <button ref={btnRef} id="button2">
        Button2
      </button>
    </div>
  );
};

问题似乎是，即使按钮具有浏览器焦点，也没有视觉指示。你可以提供这个。

使用示例styled-components：

const Button = styled.button`
  &:focus {
    outline: 2px solid red;
  }
`;

const MyComponent = () => {
  const btnRef = useRef();

  const handleClick = () => {
    btnRef.current.focus();
  };

  return (
    <div>
      <button id="button1" onClick={handleClick}>
        Button1
      </button>
      <Button ref={btnRef} id="button2">
        Button2
      </Button>
    </div>
  );
};