Javascript 使用x27作出反应；parentNode'；正确地

假设我有一系列静态的

div

s，它们创建了包含少量子元素的行。其中一个子项有一个单击处理程序，它应该触发特定于其父项的事件

div

。事件需要以父级

div

为目标，因为我们仅在父级中更改某些样式

我在下面的代码中针对每个孩子的

parentNode

是否正确？（基本上，这是最佳实践吗？）

谢谢

class ClickExample  extends Component {
  handleClick = (e) => {
    const parentDiv = e.target.parentNode;
    parentDiv.classList.toggle('someClass');
  }
  render() {
    return (
      <div>
        <div>
          <h1 onClick={(e) => { this.handleClick(e) }}>Click Me!</h1>
        </div>
        <div>
          <h1 onClick={(e) => { this.handleClick(e) }}>No, Click Me!</h1>
        </div>
      </div>
    );
  }
}

export default ClickExample

类ClickExample扩展组件{
handleClick=（e）=>{
const parentDiv=e.target.parentNode；
parentDiv.classList.toggle（'someClass'）；
}
render（）{
返回(
{this.handleClick（e）}>点击我！
{this.handleClick（e）}>不，点击我！
);
}
}
导出默认单击示例

这种方法与React理念背道而驰。您应该为此定义一个组件。您应该多读一点React哲学，但正确的方法如下：

class ClickableComponent extends React.Component {

    render() {
       return (
           <div onClick={this.props.onClick}>
               { this.props.children }
           </div>
       );
    }
}

class ClickExample extends React.Component {

  handleClick() {
      this.setState({
          active: null
      });
  }

  render() {
    return (
      <div>
        <div className={this.state.active === 1 ? 'someClass' : null}>
            <ClickableComponent onClick={() => this.setState({ active: 1 })}>
                ClickMe
            </ClickableComponent>            
        </div>
        <div className={this.state.active === 2 ? 'someOtherClass' : null}>
            <ClickableComponent onClick={() => this.setState({ active: 2 })}>
                No, ClickMe!
            </ClickableComponent>
          </div>
      </div>
    );
  }
}

export default ClickExample

类ClickableComponent扩展React.Component{
render（）{
返回(
{this.props.children}
);
}
}
类ClickExample扩展了React.Component{
handleClick（）{
这是我的国家({
活动：空
});
}
render（）{
返回(
this.setState（{active:1}）}>
点击我
this.setState（{active:2}）}>
不，点击我！
);
}
}
导出默认单击示例

Hmm。。。这并不能解决我的问题。在您的代码中，

ClickableComponent

与其父容器之间仍然没有意识到。我想用

onClick

更改标记的直接父级的样式，但您的代码只需更改用于包装

ClickableComponent

的子级的

div

的样式，而不是

ClickableComponent

的父级。这就是我的意思。子元素不应直接访问父元素。我编辑我的答案是为了告诉你如何实现你想要的

ClickExample

处理代码中单击的逻辑，并将类正确地添加到div容器中

ClickableComponent

现在只需在其道具中搜索

onClick

，然后调用

ClickExample

logic。因此，子组件不知道有关其父组件的任何信息，但会在单击时告知，以便父组件调整其样式。