由于我在多个地方看到此类建议，我也将把我的评论移到答案中，以提供额外的观点：
class TestComponent extends React.Component {
constructor() {
super();
this.onClick = this.handleClick.bind(this);
}
handleClick(event) {
const {id} = event.target;
console.log(id);
}
render() {
return (
<div>
<h3 id={this.props.id} onClick={this.onClick}>
{this.props.name}
</h3>
</div>
);
}
}
这允许：
- 避免不必要的绑定
- 以更加 React-ive 的方式访问
id 和任何其他属性。
当然，上面的示例假设您收到 id 作为道具，但您也可以进行必要的操作。
更新 1 -- 2016 年 11 月 28 日
从上面的 cmets 添加了到 CodePen 的链接。
更新 2 -- 2017 年 3 月 30 日
如前所述，如果您使用React.createClass 来定义您的组件，这将不起作用。您没有构造函数来完成此操作。如果你不介意有点丑，你可以使用其他生命周期方法。
话虽如此，现在是 2017 年。使用 ES6，好吗？！
更新 3 -- 2017 年 5 月 12 日
如果你使用class properties transform，那么你可以进一步简化它：
class TestComponent extends React.Component {
onClick = (event) => {
const {id} = event.target;
console.log(id);
}
render() {
return (
<div>
<h3 id={this.props.id} onClick={this.onClick}>
{this.props.name}
</h3>
</div>
);
}
}
更新 4 -- 2018 年 2 月 4 日
由于 bind 和 V8 中的朋友（可能还有 Chakra 等）的改进，您最好使用 this.click.bind(this) 或在传递给 onClick 时将其包装在箭头函数中。
为什么？
之前的方法仅出于性能原因而创建，关闭了将函数动态注入组件原型的一些可能性。
注意 1 -- 2018 年 4 月 14 日
请记住，更新 4 中提到的方法仍然引入了一些性能问题，因为在每个 render 传递中，由于 bind 的结果创建了一个新函数。这反过来又会渗透到子组件并导致不必要的重新渲染，因为函数每次都会发生变化。
当您内联传递箭头函数时，也会发生同样的事情。
所有其他方法，比如使用类属性，都会弄乱你的继承（你应该避免，但仍然如此），这仅仅是因为，目前，Babel 将它们转换为“实例”函数，这些函数是不在原型链上。
所以，这个：
class Person {
printA = () => { console.log('a') }
}
变成：
function _classCallCheck(instance, Constructor) {...abridged...}
var Person = function Person() {
_classCallCheck(this, Person);
this.printA = function () {
console.log('a');
};
};