javascript - react :将函数传递给组件的一个实例时，为什么所有其他实例都受到影响？

我在父级中有一个功能handleFont，它会增加字体大小。我有一个名为Child的子组件，并创建了3个实例。我将功能handleFont从Parent组件传递到了Child组件的一个实例中，但是该函数在所有组件的mouseenter上触发，并且还会影响所有组件的字体大小。
难道不应该只是它传递给的那个吗？否则，它甚至怎么知道该函数指的是什么？

class Parent extends React.Component {
   handleFont() {

       event.target.style.fontSize = "40px"
  }

  render() {
    return (<div>
      <Child />
      <Child
      />
      <Child
        handleFont = {this.handleFont}
      />
    </div>);
  }
}


class Child extends React.Component {
  componentDidMount() {
        let d = document.querySelectorAll('div')[0]
    d.addEventListener('mouseenter', this.props.handleFont)
  }
  render() {
    return <div>xxxx</div>
  };
}

ReactDOM.render(
  <Parent />,
  document.getElementById('container')
);

最佳答案

在下面的代码中。

componentDidMount() {
        let d = document.querySelectorAll('div')[0]
    d.addEventListener('mouseenter', this.props.handleFont)
  }

该事件将附加到包含所有子div的根div（容器）。

以下是事件的结构和附加位置。



您需要将特定于事件的事件附加到子div，以获得所需的行为。

关于javascript - react :将函数传递给组件的一个实例时，为什么所有其他实例都受到影响？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54454626/