Question

我正在使用ReactJS和Google的物料组件使用RMWC（https://github.com/jamesmfriedman/rmwc）。我有一个父组件，其中包含一个图标和一个文本。此图标具有Material Design Ripples效果，这意味着当我将其悬停或单击时，会触发动画。

当我悬停或点击下面的文字时，我现在想触发相同的效果。

以下是组件：

export class Subject extends Component {
constructor(props) {
    super(props)
}

triggerRippleHover() {
    console.log("hovered");
    // HERE
  }

renderSubjectIcon(Icon) {
    return (
        <Icon className="subject-icon" />
    )
  }

render() {
    return (
        <div className="subject-container">
            <Ripple unbounded>
                <div className="subject-icon-container">
                    {this.renderSubjectIcon(this.props.icon)}
                </div>
            </Ripple>
            <span onMouseEnter={this.triggerRippleHover}>{this.props.name}</span>
        </div>
    )
}

基本上，我只想＆＃34;延伸＆＃34;触发图标行为的区域（如果有意义的话）。

我一直在广泛搜索，但无法找到合适的答案。

非常感谢你的帮助。

Answer 1

您可以尝试以下方法：

1.获取<Icon /> 参考，如下所示（refs documented here）：

<Icon className="subject-icon" ref={element => this.iconRef = element} />

2.如果您拥有<Icon /> 参考，那么在您的triggerRippleHover回调中，您可以以编程方式触发mouseover事件（或相应的事件） this.iconRef。 Here's another SO answer，更好地描述了如何触发事件。这是一个示例代码片段，可以让您了解我的想法：

triggerRippleHover() {
  // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
  const event = new MouseEvent('mouseover', {
    view: window,
    bubbles: true,
    cancelable: true
  })

  // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent  
  this.iconRef.dispatchEvent(event)
}

Answer 2

以下是有关如何触发事件的MDN文章：https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

一种方法可能如下：

var mouseoverEvent = new Event('mouseover');

myTrigger.addEventListener("mouseover", function(){
    myMouseOver.dispatchEvent(mouseoverEvent);
});

这是完整的小提琴...... https://jsfiddle.net/sarawinter79/sc2fzeqm/

Answer 3

非常感谢您的回答，他们一直很有帮助，我已经设法模拟了onMouseDown和onMouseUp事件，感谢Jordan Enev的回答（通过触发涟漪效果https://github.com/material-components/material-components-web/tree/master/packages/mdc-ripple的activate（）API）但不是悬停，因为没有任何API。

我现在意识到我需要触发材质组件的：hover伪类，这似乎不适用于该方法。

React - 如何手动触发子组件的鼠标输入

3 个答案: