我正在尝试.click() event在React元素上模拟 a但我不知道为什么它不起作用（当我触发 时它没有reactevent）。
我想仅使用 JavaScript 发表 Facebook 评论，但我被困在第一步（.click()在div[class="UFIInputContainer"]元素上做一个）。
我的代码是：
document.querySelector('div[class="UFIInputContainer"]').click();
这是我尝试执行此操作的 URL：https://www.facebook.com/plugins/feedback.php...
PS 我对 React 没有经验，我真的不知道这在技术上是否可行。这是可能的？
编辑：我正在尝试从Chrome DevTools Console.
React 跟踪用于检测鼠标点击的mousedown和mouseup事件，而不是click像大多数其他事件一样的事件。因此，不是click直接调用方法或调度click事件，而是调度 down 和 up 事件。为了更好的衡量，我也发送了click事件，但我认为这对 React 来说是不必要的：
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 代码。
使用 react 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 元素，然后使用引用来触发常规 dom 事件。
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;
从先前的溶液中使用一些JavaScript代码注入它也是不可能性，首先启发注入 阵营进入页面，然后火在该页面元素click事件。
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>