Question

有关使用焦点设置的所有大多数文章和示例均使用input元素进行了说明。它可以很好地与输入元素配合使用，但是如何使用React useRef和useEffect挂钩将焦点设置为div元素？

如何使用 react-testing-library 的toHaveFocus进行测试？

Answer 1

经过一段时间的搜索并浪费了很多时间，我才能够做到。在这里分享给朋友！

组件文件SetFocusToDivComponent.js

import React, { useRef, useEffect } from 'react';

export default function SetFocusToDivComponent() {

  const containerRef = useRef(null);

  useEffect(() => {
    containerRef.current.focus();
  });

  return (
    <div
      data-test={'container'}
      ref={errorDisplayWrapperRef}
      tabIndex={-1}
    >
      Hello There!!
    </div>
  );
}

测试文件SetFocusToDivComponent.tests.js

import React from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';
import SetFocusToDivComponent from './SetFocusToDivComponent';

let container;

beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});

afterEach(() => {
  document.body.removeChild(container);
  container = null;
});

test('setting focus', () => {
  act(() => {
    ReactDOM.render(<SetFocusToDivComponent />, container);
  });
  expect(container.querySelector('div[data-test="container"]')).toHaveFocus();
});

如果您使用样式div而非纯HTML div，则使用innerRef代替ref

const StyledDiv = styled.div`
  border-radius: 0 0 5px 5px;
  border: 1px solid green;
`;

<StyledDiv
  data-test={'container'}
  innerRef={errorDisplayWrapperRef}
  tabIndex={-1}
>
  Hello There!!
</StyledDiv>

PS：不要忘记tabIndex

如何使用useEffect和useRef挂钩将焦点设置为react组件中的div元素？以及如何测试呢？

1 个答案: