React - 如何手动触发子组件的 mouseenter

Question

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

我现在想在我悬停或单击下面的文本时触发相同的效果。

这是组件：

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>
    )
}

基本上，我只想“扩展”触发图标行为的区域（如果有任何意义）。

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

非常感谢你的帮助。

Answer 1

您可以尝试以下方法：

1.按如下方式获取<Icon /> 参考（参考记录在此处）：

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

2.一旦你有了<Icon /> ref，那么在你的triggerRippleHover回调中，你可以以编程方式触发mouseover事件（或相应的事件）到this.iconRef. 这是另一个 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)
}