반응 요소에 대한 클릭 이벤트 시뮬레이션

반응 요소에 대한 클릭 이벤트 시뮬레이션

지금 시뮬레이션을 해보려고 합니다..click() event동작하지 않는 이유를 알 수 없습니다(Resact 요소를 기동할 때 반응이 없습니다).event).

JavaScript만으로 Facebook 코멘트를 투고하고 싶은데 첫 번째 단계에서 막힙니다..click()에div[class="UFIInputContainer"]요소)

암호는 다음과 같습니다.

document.querySelector('div[class="UFIInputContainer"]').click();

다음 URL을 참조해 주세요.https://www.facebook.com/plugins/feedback.php...

P.S. 저는 리액트에 대한 경험이 없어서 이것이 기술적으로 가능한지 잘 모르겠습니다.가능해요?

편집: 이 작업을 수행하려고 합니다.Chrome DevTools Console.

리액트 트랙은mousedown그리고.mouseup마우스 클릭을 검출하기 위한 이벤트,click다른 모든 사건들과 마찬가지로요그래서 전화하는 대신click직접 방법 또는 디스패치click이벤트 다운 및 업 이벤트를 디스패치해야 합니다.좋은 결과를 얻기 위해, 나는 또한click이벤트입니다만, 리액트에는 필요 없다고 생각합니다.

const mouseClickEvents = ['mousedown', 'click', 'mouseup'];
function simulateMouseClick(element){
  mouseClickEvents.forEach(mouseEventType =>
    element.dispatchEvent(
      new MouseEvent(mouseEventType, {
          view: window,
          bubbles: true,
          cancelable: true,
          buttons: 1
      })
    )
  );
}

var element = document.querySelector('div[class="UFIInputContainer"]');
simulateMouseClick(element);

이 답변은 Selenium Webdriver 코드에서 영감을 받았습니다.

리액트 16.8에서는 다음과 같이 합니다.

const Example = () => {
  const inputRef = React.useRef(null)
        
  return (
    <div ref={inputRef} onClick={()=> console.log('clicked')}>
      hello
    </div>
  )
}
    

전화만 하면 됩니다.

inputRef.current.click()

사용하다refs콜백 함수의 요소를 가져와 클릭을 트리거하려면click()기능.

class Example extends React.Component{
  simulateClick(e) {
    e.click()
  }
  render(){
    return <div className="UFIInputContainer"
    ref={this.simulateClick} onClick={()=> console.log('clicked')}>
      hello
      </div>
  }
}

ReactDOM.render(<Example/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

컴포넌트에 클래스를 정의하지 않고 선언만 하는 경우:

function App() { ... }

이 경우 useRef 훅을 설정하고 이를 사용하여 임의의 HTML 요소를 가리키거나 참조한 후 참조를 사용하여 일반 돔이벤트를 트리거하면 됩니다.

import React, { useRef } from 'react';

function App() {
  const inputNameRef = useRef()
  const buttonNameRef = useRef()
  
  function handleKeyDown(event) {
    // This function runs when typing within the input text,
    // but will advance as desired only when Enter is pressed
    if (event.key === 'Enter') {
      // Here's exactly how you reference the button and trigger click() event,
      // using ref "buttonNameRef", even manipulate innerHTML attribute
      // (see the use of "current" property)
      buttonNameRef.current.click()
      buttonNameRef.current.innerHTML = ">>> I was forced to click!!"
    }
  }
  
  function handleButtonClick() {
    console.log('button click event triggered')
  }
  
  return (
    <div>
      <input ref={inputNameRef} type="text" onKeyDown={handleKeyDown}  autoFocus />
      <button ref={buttonNameRef} onClick={handleButtonClick}>
      Click me</button>
    </div>
  )
}

export default App;

to@carlin.scot의 훌륭한 답변은 다음과 같습니다.mousedown,mouseup그리고.click실제 마우스를 클릭할 때 발생하는 것과 같습니다(그렇지 않으면 React가 이를 감지하지 못합니다).

이 답변에 따라 다음 사이에 약간의 휴지가 추가됩니다.mousedown그리고.mouseup이벤트를 정확한 순서로 정렬할 수 있습니다).click마지막 발화)일시중단으로 인해 비동기화되므로 바람직하지 않을 수 있습니다(따라서 편집 to@carlin.scot의 답변만 제안하지 않은 이유).

async function simulateMouseClick(el) {
  let opts = {view: window, bubbles: true, cancelable: true, buttons: 1};
  el.dispatchEvent(new MouseEvent("mousedown", opts));
  await new Promise(r => setTimeout(r, 50));
  el.dispatchEvent(new MouseEvent("mouseup", opts));
  el.dispatchEvent(new MouseEvent("click", opts));
}

사용 예:

let btn = document.querySelector("div[aria-label=start]");
await simulateMouseClick(btn);
console.log("The button has been clicked.");

이 작업을 수행하려면 페이지 포커스가 필요할 수 있으므로 Chrome DevTools의 렌더링 탭을 열고 "DevTools가 열려 있는 동안 페이지 포커스를 에뮬레이트"하는 상자를 선택하지 않으면 콘솔에서 실행할 수 없습니다.

이전 솔루션에서 영감을 받아 javascript 코드 주입을 사용하여 먼저 페이지에 React를 주입한 후 해당 페이지 요소에서 클릭 이벤트를 실행할 수도 있습니다.

let injc=(src,cbk) => { let script = document.createElement('script');script.src = src;document.getElementsByTagName('head')[0].appendChild(script);script.onload=()=>cbk() }
injc("https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js",() => injc("https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js",() => {

class ReactInjected extends React.Component{
  simulateClick(e) {
    e.click()
  }
  render(){
    return <div className="UFIInputContainer"
    ref={this.simulateClick} onClick={()=> console.log('click injection')}>
      hello
      </div>
  }
}
ReactDOM.render(<ReactInjected/>, document.getElementById('app'))

} ))

<div id="app"></div>

좀 지저분한 해킹이지만, 이 게시물로부터의 이전 제안은 실패한 반면, 이 게시물은 나에게 효과가 있습니다. '아까운데'가 있는 돼요onClick소스코드에 정의되어 있습니다(그 때문에, Web 사이트를 모바일 모드로 실행할 필요가 있었습니다).에는 「」가 붙습니다.__reactEventHandlerXXXXXXX반응 이벤트에 액세스할 수 있습니다.

let elem = document.querySelector('YOUR SELECTOR');
//Grab mouseEvent by firing "click" which wouldn't work, but will give the event
let event;
likeBtn.onclick = e => {
  event = Object.assign({}, e);
  event.isTrusted = true; //This is key - React will terminate the event if !isTrusted
};
elem.click();
setTimeout(() => {
  for (key in elem) {
    if (key.startsWith("__reactEventHandlers")) {
      elem[key].onClick(event);
    }
  }
}, 1000);

  

React useRef Hooks를 사용하면 다음과 같은 버튼에서 클릭 이벤트를 트리거할 수 있습니다.

export default const () => {

    // Defining the ref constant variable
    const inputRef = React.useRef(null);

    // example use
    const keyboardEvent = () => {
      inputRef.current.handleClick(); //Trigger click
    }

    // registering the ref
    return (
       <div ref={inputRef} onClick={()=> console.log('clicked')}>
          hello
       </div>
    )
}

이 답변은 칼린.스코트 코드에서 영감을 받았습니다.다만, 제 경우는 포커스인 이벤트에서만 동작합니다.

const element = document.querySelector('element')
const events = ['mousedown', 'focusin']

events.forEach(eventType =>
    element.dispatchEvent(
        new MouseEvent(eventType, { bubbles: true })
    )
)

언급URL : https://stackoverflow.com/questions/40091000/simulate-click-event-on-react-element