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

Question

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

const MyComponent = props =>{

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

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

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

有没有办法让这个 ref 方法起作用？或者任何让按钮以编程方式获得焦点的方法？

Answer 1

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

示例：

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

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

How to programmatically focus a button in React?

reactjs

react-hooks

focus