Как установить фокус на карусель, содержащую изображение или div, чтобы я мог перемещаться с помощью клавиш со стрелками?

Question

Я работал над Муравьем Carousel: - https://ant.design/components/carousel/.Carousel находится внутри Modal.У меня мало детей div.Изначально клавиши со стрелками не работают для навигации.Если я нажму на содержимое div, то они начнут работать.

Но если div содержит изображение, при нажатии на него фокус не устанавливается на карусель, даже если в этом * 1010 есть какой-либо другой текст* или слайд, щелкнув по нему, устанавливает карусель в качестве фокуса.

Я пытался использовать focusOnSelect карусели.Также установите refs в Carousel, затем вызовите this.xyzRef.current.focus() на componentDidMount(), но это дает мне ошибку

: - Произошла перекрестная ошибка.React не имеет доступа к фактическому объекту ошибки в разработке.См. https://reactjs.org/docs/cross-origin-errors.html

код: - https://codesandbox.io/s/pmww228ynj

// JSX-файл

export default class ABCD extends React.Component {
  constructor(props) {
    super(props);

    this.textInput = React.createRef();
    };


  componentDidMount() {
    console.log(this.textInput);
  }

  render() {
    return (
      <Modal visible wrapClassName="abc">
        <Carousel
          id="abc"
          ref={this.textInput}
          draggable
          arrows
          dots={false}
          onSelectFocus={true}
          infinite={false}
          focusOnSelect
        >
          <div className="slick-slide">
            <div>
              <img
                alt="ads"
                src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg"
              />
              <h3>Page 1</h3>
            </div>
          </div>
          <div>
            <h3>Page 2</h3>
          </div>
          <div>
            <h3>Page 3</h3>
          </div>
          <div>
            <h3>Page 4</h3>
          </div>
        </Carousel>
      </Modal>
    );
  }
}

Я ожидаю, что на выходе можно будет использовать клавиши со стрелками влево и вправо дляперемещаться в карусели

Answer 1

Используйте методы next () и prev (), приведенные в карусельной документации.Также используйте слушатели действия, чтобы обнаружить нажатие клавиши со стрелкой.

Answer 2

Похоже, что для этой проблемы нет возможного решения.

И проблема в antd.

Карусель в antd имеет значение slick и не может установить фокус на внутреннем элементе.И имел плохой доступ (не может перемещаться по вкладке).

Проблема с установкой фокуса на внутренний модальный компонент