Question

无论如何都要触发React的mouseover和mouseenter事件？有可能解雇：

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

是否有类似的方法来解雇mouseenter？我需要用第三方库做一个复杂的React事件。

Answer 1

来自@ Jonathan的回答：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");

Answer 2

您是否尝试过使用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。

手动激活鼠标悬停事件

2 个答案: