在 React 中处理（转储）子组件中的事件时，应该向从其（智能）父组件传递的回调提供什么以使其按预期进行？我们感兴趣的应该是事件还是结果的一部分？当我们有深度嵌套的组件时，它如何扩展？还有其他一些考虑吗？
直观地说，我看到了传递整个事件背后的好处，因为 (i) 在父级中处理它时我们可以从事件中获取更多数据，并且 (ii) 它分离了关注点（转储组件仅呈现并且没有逻辑）。另一方面，它要求孩子拥有bind包装方法的构造函数。
我已经看到使用了这两种方法。例如，在Thinking in React 中，作者将回调包装在子组件中以传递值（请参阅 CodePen 上的代码），而在大多数 SO 帖子中，事件被传递并通过event.target.value.
代码示例
通过事件：
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>
);
}
}仅传递值（注意 handleClick2 ）：
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(checked) {
this.setState({checked: checked});
}
render() {
return (
<Child checked={this.state.checked} handleClick={this.handleClick}/>
);
}
}
class Child extends React.Component {
constructor(props) {
super(props);
this.handleClick2 = this.handleClick2.bind(this);
}
handleClick2(event) {
this.props.handleClick(event.target.checked);
}
render() {
return (
<p>
<input
type="checkbox"
checked={this.props.checked}
onChange={this.handleClick2}
/>
{" "}
Click me
</p>
);
}
}