Имитация щелчка по динамически отображаемому элементу React

Я создаю игру по географии, в которой вы должны щелкнуть определенную страну на карте мира - если вы щелкнете по правой, страна изменит цвет, и в игре появится новая страна, на которую нужно щелкнуть. Если игрок не знает, он может нажать на кнопку, которая покажет ему правильный ответ. Для этого я хочу смоделировать событие щелчка, чтобы вызывалась та же функция onClick (), как если бы вы щелкнули по правильной стране.

Я использую D3, а карта мира состоит из путей svg. Ниже приведен код, который, как я думал, будет работать с использованием метода HTMLElement.click ():

    function simulateClick() {

    // for each index in the nodelist, 
    // if the properties are equal to the properties of currentTargetUnit,
    // simulate a click on the path of that node

    let nodelist = d3.selectAll(".unit")
    for (let i = 0; i < nodelist._groups[0].length; i++) {
        if (nodelist._groups[0].item(i).__data__.properties.filename === currentTargetUnit.properties.filename) {
            console.log(nodelist._groups[0][i])
            // logs the correct svg path element
            nodelist._groups[0][i].click()
            // logs TypeError: nodelist._groups[0][i].click is not a function
        }
    }
}

Затем я просмотрел несколько руководств, в которых говорится, что по какой-то причине я не совсем понимаю, что для этого вам скорее нужно использовать React.useRef, но во всех своих примерах они помещают значение ref в элемент, который возвращается из начиная с компонента React, например:

import React, { useRef } from "react";

const CustomTextInput = () => {
  const textInput = useRef();

  focusTextInput = () => textInput.current.focus();

  return (
    <>
      <input type="text" ref={textInput} />
      <button onClick={focusTextInput}>Focus the text input</button>
    </>
  );
}

Это явно не работает, потому что мои элементы пути svg изначально не возвращаются. Итак, мой вопрос - как я могу этого добиться, используя useRef или нет?

Ниже приведены некоторые предыдущие вопросы, которые я рассмотрел, но они также не помогли. Имитировать событие щелчка на элементе реакции Модуль визуализации React Test, имитирующий клики по элементам Имитация щелчка по элементу реакции


reactjs javascript d3.js use-ref onclick
person Zuzim    schedule 21.09.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я наконец решил это - вместо вызова onClick (), который был установлен внутри узла, я создал новое событие clickevent с помощью следующего кода:

    function simulateClick() {
    let nodelist = d3.selectAll(".unit")
    for (let i = 0; i < nodelist._groups[0].length; i++) {
        if (nodelist._groups[0].item(i).__data__.properties.filename === currentTargetUnit.properties.filename) {
            var event = document.createEvent("SVGEvents");
            event.initEvent("click",true,true);
            nodelist._groups[0].item(i).dispatchEvent(event);
        }
    }
}
person Zuzim    schedule 22.09.2020