javascript - React : When passing in a function to one instance of a component, 为什么所有其他实例都会受到影响？

Question

我在父级中有一个函数 handleFont 可以增加字体大小。我有一个名为 Child 的子组件，并创建了它的 3 个实例。我将 Parent 组件中的函数 handleFont 传递给了 Child 组件的 one 实例，但是该函数在所有这些的 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')
);

Answer 1

在下面的代码中。

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

该事件正在附加到包含所有子 div 的根 div(容器)。

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

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