Question

在React中处理（转储）子组件中的事件时，应该从其（智能）父组件传递的回调中提供什么来实现它？它应该是我们感兴趣的事件还是仅仅是结果的一部分？当我们有深层嵌套的组件时，它如何扩展？还有其他一些考虑因素吗？

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

我已经看过两种方法。例如，在Thinking in React中，作者将子组件中的回调包装为传递值（see the code on CodePen），而在大多数SO帖子中传递事件，并通过{在父组件中提取其值。 {1}}。

代码示例

通过事件：

＆＃13;

event.target.value

＆＃13;

仅传递值（通知 class Parent extends React.Component { constructor(props) { super(props); this.state = { checked: false }; this.handleClick = this.handleClick.bind(this); } handleClick(event) { this.setState({checked: event.target.checked}); } render() { return ( <Child checked={this.state.checked} handleClick={this.handleClick}/> ); } } class Child extends React.Component { render() { return ( <p> <input type="checkbox" checked={this.props.checked} onChange={this.props.handleClick} /> {" "} Click me </p> ); } } ）：

＆＃13;

handleClick2

＆＃13;

Answer 1

你应该在没有事件的情况下传递你需要的东西。除非您想从事件中提取相关数据，否则不需要整个对象：例如target或当您对多个元素/操作使用相同的回调时。

您不会遇到任何性能问题，并且肯定没有做出反应 - 这样做的方法。只要用你的判断。

Answer 2

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

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

<!doctype html>
<html>
 <head>
  <title>Boring example</title>
 </head>
 <body>
  <p>Hello <span id=x>world</span>!</p>
  <script>
   function debug(target, currentTarget, eventPhase)
     {
     console.log("target: " + JSON.stringify(target) );
     console.log("currentTarget: " + JSON.stringify(currentTarget) );
     console.log("eventPhase: " + JSON.stringify(eventPhase) );
     }
     
   function test(e) {
     debug(e.target, e.currentTarget, e.eventPhase)
   }
   
   document.addEventListener("hey", test, true)
   document.body.addEventListener("hey", test)
   var ev = new Event("hey", {bubbles:true})
   document.getElementById("x").dispatchEvent(ev)
  </script>
 </body>
</html>

调试函数将被调用两次。每次事件的目标属性值都是span元素。第一次currentTarget属性的值将是文档，第二次是body元素。 eventPhase属性的值从CAPTURING_PHASE切换到BUBBLING_PHASE。如果为span元素注册了事件侦听器，则eventPhase属性的值将为AT_TARGET。

因此，移植到newer或renewable的内容很容易。

<强>参考

处理React事件＆＃34; React方式＆＃34;：提供事件与将结果提供给回调

2 个答案: