react如何解决点击子元素后父元素的css样式也生效

在 React 中，也可以使用事件委托来解决点击子元素后父元素的 CSS 样式也生效的问题。不同于使用原生 JavaScript，React 中需要使用 `event.currentTarget` 属性来获取当前绑定事件的元素。

例如，如果你想让点击子元素时不触发父元素的事件，可以通过以下代码实现：

class Parent extends React.Component {
  handleClick = (event) => {
    if (event.target.classList.contains('child')) {
      // 执行子元素的操作
    }
    event.stopPropagation(); // 阻止事件冒泡到父元素
  }
  
  render() {
    return (
      <div className="parent" onClick={this.handleClick}>
        <div className="child">子元素</div>
        <div className="child">子元素</div>
        <div className="child">子元素</div>
      </div>
    );
  }
}

在 `handleClick` 方法中，我们使用 `event.target` 来获取触发事件的元素，使用 `event.currentTarget` 来获取当前绑定事件的元素。当触发事件的元素是子元素时，执行子元素的操作，同时使用 `event.stopPropagation()` 方法阻止事件冒泡到父元素。

这样，当你点击子元素时，只会触发子元素的操作，不会触发父元素的事件。