我想在一个React元素上模拟一个.click()事件，但是我无法弄清楚为什么它不起作用（当我触发这个event时没有反应）。
我想使用JavaScript发布Facebook评论，但我卡在了第一步（对div[class="UFIInputContainer"]元素执行.click()）。
我的代码如下：
document.querySelector('div[class="UFIInputContainer"]').click();
这是我尝试做的 URL：https://www.facebook.com/plugins/feedback.php...
附注：我对React没有经验，不确定技术上是否可行。这是可能的吗？
编辑：我正在尝试从Chrome DevTools控制台中执行此操作。
为了检测鼠标点击，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>e.props 包含映射到元素上的任何函数。在我的实例中，它是一个带有 onChange 的复选框，因此在 simulateClick 中 e.props.onChange() 完美地工作。 - Michael Aaron Wilson对@carlin.scott的精彩答案进行了微调，它模拟了一个鼠标点击（mousedown，mouseup和click），就像真正的鼠标点击一样（否则React无法检测到）。
这个答案在mousedown和mouseup事件之间添加了一个小暂停以增加真实感，并按照正确的顺序放置了事件（click最后触发）。该暂停使其异步化，这可能是不期望的（这就是为什么我没有建议修改@carlin.scott的答案的原因）。
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.");
function App() { ... }
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;
这有点不太正规的操作，但是对我来说很有效，而此帖子中以前的建议都失败了。你需要在源代码中找到具有 onClick 定义的元素（我必须在移动模式下运行网站才能找到它）。该元素将具有一个 __reactEventHandlerXXXXXXX 属性，允许您访问 React 事件。
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);
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>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>
)
}
这个答案受到了carlin.scott代码的启发。 然而，在我的情况下，它只能使用focusin事件。
const element = document.querySelector('element')
const events = ['mousedown', 'focusin']
events.forEach(eventType =>
element.dispatchEvent(
new MouseEvent(eventType, { bubbles: true })
)
)
div[class="UFIInputContainer"]，它是一个输入框，而不是按钮！（下图）
function CustomTextInput(props) {
// textInput must be declared here so the ref can refer to it
const textInput = useRef(null);
function handleClick() {
textInput.current.focus();
}
return (
<div>
<input
type="text"
ref={textInput} />
<input
type="button"
value="Focus the text input"
onClick={handleClick}
/>
</div>
);
}
要查找此示例以及更多内容，请检查 文档。