编辑：请参阅 ES6 更新示例的最终示例。
这个答案只是处理直接父子关系的情况。当父母和孩子可能有很多中介时，请查看此答案。
其他解决方案没有抓住重点
虽然它们仍然可以正常工作，但其他答案缺少一些非常重要的东西。
在 React.js 中，是否没有一种简单的方法可以使用事件将子项的props传递给其父项？
父级已经拥有该子级props！: 如果孩子有一个props，那是因为它的父母把那个props提供给了孩子！为什么你想让孩子把props传回给父母，而父母显然已经有了那个props？
更好的实施
孩子：真的没有必要比这更复杂。
var Child = React.createClass({
render: function () {
return <button onClick={this.props.onClick}>{this.props.text}</button>;
},
});
有一个孩子的父级：使用它传递给子级的值
var Parent = React.createClass({
getInitialState: function() {
return {childText: "Click me! (parent prop)"};
},
render: function () {
return (
<Child onClick={this.handleChildClick} text={this.state.childText}/>
);
},
handleChildClick: function(event) {
// You can access the prop you pass to the children
// because you already have it!
// Here you have it in state but it could also be
// in props, coming from another parent.
alert("The Child button text is: " + this.state.childText);
// You can also access the target of the click here
// if you want to do some magic stuff
alert("The Child HTML is: " + event.target.outerHTML);
}
});
JsFiddle
带有子项列表的父项：您仍然拥有父项所需的一切，不需要让子项变得更复杂。
var Parent = React.createClass({
getInitialState: function() {
return {childrenData: [
{childText: "Click me 1!", childNumber: 1},
{childText: "Click me 2!", childNumber: 2}
]};
},
render: function () {
var children = this.state.childrenData.map(function(childData,childIndex) {
return <Child onClick={this.handleChildClick.bind(null,childData)} text={childData.childText}/>;
}.bind(this));
return <div>{children}</div>;
},
handleChildClick: function(childData,event) {
alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
alert("The Child HTML is: " + event.target.outerHTML);
}
});
JsFiddle
也可以使用this.handleChildClick.bind(null,childIndex)然后使用this.state.childrenData[childIndex]
请注意，我们正在绑定null上下文，否则 React 会发出与其自动绑定系统相关的警告。使用 null 意味着您不想更改函数上下文。另见。
关于其他答案中的封装和耦合
在耦合和封装方面，这对我来说是一个坏主意：
var Parent = React.createClass({
handleClick: function(childComponent) {
// using childComponent.props
// using childComponent.refs.button
// or anything else using childComponent
},
render: function() {
<Child onClick={this.handleClick} />
}
});
使用 props：正如我上面解释的，你已经在父组件中拥有了 props，所以传递整个子组件来访问 props 是没有用的。
使用 refs：您已经在事件中拥有点击目标，并且在大多数情况下这已经足够了。此外，您可以直接在孩子上使用 ref ：
<Child ref="theChild" .../>
并访问父节点中的 DOM 节点
React.findDOMNode(this.refs.theChild)
对于更高级的情况，您要访问父级中子级的多个引用，子级可以直接在回调中传递所有 dom 节点。
组件有一个接口（props），父组件不应该对子组件的内部工作做任何假设，包括它的内部 DOM 结构或它声明了 refs 的 DOM 节点。使用子项的 ref 的父项意味着您将 2 个组件紧密耦合。
为了说明这个问题，我将引用关于Shadow DOM 的引用，它在浏览器中用于渲染诸如滑块、滚动条、视频播放器之类的东西......：
他们在您（Web 开发人员）可以访问的内容与被视为实现细节的内容之间创建了一个界限，因此您无法访问。然而，浏览器可以随意跨越这个边界。有了这个边界，他们就能够像您一样使用相同的古老 Web 技术构建所有 HTML 元素，无需使用 div 和 span。
问题是，如果让子实现细节泄漏到父中，则很难在不影响父的情况下重构子。这意味着作为库作者（或作为使用 Shadow DOM 的浏览器编辑器）这是非常危险的，因为您让客户端访问太多，这使得在不破坏复古兼容性的情况下升级代码变得非常困难。
如果 Chrome 实现了它的滚动条，让客户端访问该滚动条的内部 dom 节点，这意味着客户端可能有可能简单地破坏该滚动条，并且当 Chrome 在重构后执行其自动更新时，应用程序将更容易中断滚动条...相反，它们只允许访问一些安全的东西，比如用 CSS 自定义滚动条的某些部分。
关于使用其他任何东西
在回调中传递整个组件是危险的，并且可能会导致新手开发人员做非常奇怪的事情，例如在父级内部调用childComponent.setState(...)orchildComponent.forceUpdate()或为其分配新变量，从而使整个应用程序更难以推理。
编辑：ES6 示例
由于现在很多人使用 ES6，这里是 ES6 语法的相同示例
孩子可以很简单：
const Child = ({
onClick,
text
}) => (
<button onClick={onClick}>
{text}
</button>
)
父级可以是一个类（它最终可以管理状态本身，但我在这里将它作为props传递：
class Parent1 extends React.Component {
handleChildClick(childData,event) {
alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
alert("The Child HTML is: " + event.target.outerHTML);
}
render() {
return (
<div>
{this.props.childrenData.map(child => (
<Child
key={child.childNumber}
text={child.childText}
onClick={e => this.handleChildClick(child,e)}
/>
))}
</div>
);
}
}
但是如果不需要管理状态也可以简化：
const Parent2 = ({childrenData}) => (
<div>
{childrenData.map(child => (
<Child
key={child.childNumber}
text={child.childText}
onClick={e => {
alert("The Child button data is: " + child.childText + " - " + child.childNumber);
alert("The Child HTML is: " + e.target.outerHTML);
}}
/>
))}
</div>
)
JsFiddle
PERF WARNING（适用于 ES5/ES6）：如果你使用PureComponentor shouldComponentUpdate，上面的实现不会默认优化，因为使用onClick={e => doSomething()}, or 直接在渲染阶段绑定，因为它会在每次父级渲染时创建一个新函数。如果这是您的应用程序中的性能瓶颈，您可以将数据传递给子项，并将其重新注入“稳定”回调（在父类上设置，并绑定到this类构造函数），以便PureComponent优化可以启动，或者您可以实现自己的shouldComponentUpdate并忽略props比较检查中的回调。
您还可以使用Recompose库，它提供更高阶的组件来实现微调优化：
// A component that is expensive to render
const ExpensiveComponent = ({ propA, propB }) => {...}
// Optimized version of same component, using shallow comparison of props
// Same effect as React's PureRenderMixin
const OptimizedComponent = pure(ExpensiveComponent)
// Even more optimized: only updates if specific prop keys have changed
const HyperOptimizedComponent = onlyUpdateForKeys(['propA', 'propB'])(ExpensiveComponent)
在这种情况下，您可以使用以下方法优化 Child 组件：
const OptimizedChild = onlyUpdateForKeys(['text'])(Child)