Javascript “处理反应事件”；“反应方式”：提供事件与将结果提供给回调

在React中处理（转储）子组件中的事件时，应该向从其（智能）父组件传递的回调提供什么以使其符合预期？这是我们感兴趣的事件还是结果的一部分？当我们有深度嵌套的组件时，它是如何伸缩的？还有其他考虑吗

直观地说，我看到传递整个事件背后的好处，因为（I）在父级中处理事件时，我们可以从事件中获得更多数据，（ii）它分离关注点（转储组件仅呈现，没有逻辑）。另一方面，它要求子级有一个构造函数来绑定包装器方法

这两种方法我都见过。例如，在author中，将回调包装在子组件中以传递值（），而在大多数SO POST中，事件被传递，其值通过

event.target.value

在父组件中提取

代码示例

通行证事件：

类父级扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
勾选：假
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（事件）{
this.setState（{checked:event.target.checked}）；
}
render（）{
返回(
);
}
}
子类扩展了React.Component{
render（）{
返回(

{" "}
点击我

);
}
}

你应该在没有活动的情况下传递你需要的东西。不需要整个对象，除非您希望从事件中提取相关数据：例如

目标

，或者当您对多个元素/操作使用相同的回调时

---

您不会有任何性能问题，而且绝对没有任何方法可以做到这一点。仅凭您的判断。

事件。target

是Web平台标准的一部分。例如：

让我们看一个事件如何在树中工作的示例：

无聊的例子
你好，世界

函数调试（目标、当前目标、事件阶段）
{
log（“目标：+JSON.stringify（目标））；
log（“currentTarget:+JSON.stringify（currentTarget））；
log（“eventPhase:+JSON.stringify（eventPhase））；
}
功能测试（e）{
调试（e.target、e.currentTarget、e.eventPhase）
}
文档。addEventListener（“嘿”，测试，真）
document.body.addEventListener（“嘿，测试”）
var ev=新事件（“嘿，{bubbles:true}”）
document.getElementById（“x”）.dispatchEvent（ev）

这实际上取决于您自己的用例，您需要从事件中获得更多值还是只需要一个值？我想说的是，最好只使用一个值来传递您需要的内容，而不是您计划使用的对象。如果您不确定您可能需要从事件中获得什么，或者需要多个值，那么只需传递整个事件。没有一种正确或错误的方法，只是取决于您自己的用例