React手動觸發鼠標事件

Question

是否有觸發React的mouseover和mouseenter事件？有可能發生：

ReactDOM.findDOMNode(someNode).focus(); 
ReactDOM.findDOMNode(someNode).click(); 

有沒有類似的方法來觸發mouseenter？我需要與第三方庫進行復雜的React事件。

Answer 1

您是否嘗試過使用React Synthetic Events？下面是一個例子：

class App extends React.Component { 

    onEnter() { 
     console.log('enter'); 
    } 

    onOver() { 
     console.log('over'); 
    } 

    render() { 
    return (
     <div style={{ backgroundColor: 'red', padding: '20px' }} onMouseOver={this.onOver}> 
      <h1 onMouseEnter={this.onEnter}>Hello World</h1> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<App/>, document.getElementById('mainContainer')); 

而這裏是上述代碼的jfiddle。

Answer 2

從@喬納森在這個問題的答案：Trigger onmouseover event programmatically in JavaScript

這爲我工作：

function fireEvent(elementId, eventName) { 
    if(document.getElementById(elementId) != null) { 
    if(document.getElementById(elementId).fireEvent) { 
     document.getElementById(elementId).fireEvent('on' + eventName);  
    } else { 
     var evObj = document.createEvent('Events'); 
     evObj.initEvent(eventName, true, false); 
     document.getElementById(elementId).dispatchEvent(evObj); 
    } 
    } 
} 

然後，你可以這樣調用：

fireEvent(elementId, "mouseover");