viewMore = (i,j) => () => {
    console.log(i,j)
}

要将参数传递给事件处理程序，我们需要使用currying。使用上述方法，在调用 render 时不会一直创建新函数。

由于我在多个地方看到此类建议，因此我也将把我的评论移到答案中，以提供额外的观点：

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>
    );
  }
}

这允许：

1. 避免不必要的绑定
2. id以更具react性的方式访问 the和其他任何属性。

当然，上面的例子假设你收到了id一个 prop，但你也可以做一些必要的操作。

更新 1 -- 2016 年 11 月 28 日

添加了来自上述评论的CodePen链接。

更新 2 -- 2017 年 3 月 30 日

如前所述，如果您React.createClass用来定义组件，这将不起作用。你没有一个构造函数来实现它。如果您不介意有点丑陋，您可以使用其他生命周期方法。

话虽如此，现在是 2017 年。使用 ES6，您会吗？！

更新 3 -- 2017 年 5 月 12 日

如果您使用的是类属性 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 日

由于bindV8 中的和朋友的改进（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');
  };
};

我在这里为 ES6 做了一个更新的答案：https ://stackoverflow.com/a/35748912/76840

本质上，您可以使用箭头函数表达式，它具有保留 的好处this：

onClick={(event)=>this.viewMore(attributeId, event)}

在此编辑中，如果您使用启用了第 2 阶段的 Babel，您可以使用如下属性：

// Within your class...
viewMore = (event) => { /* ... */ }
// Within render method in your JSX
onClick = {this.viewMore}

您可以使用柯里化功能。

ES5：

viewMore(param) { // param is the argument you passed to the function
    return function(e) { // e is the event object that returned

    };
}

ES6

viewMore = param => e => {
  // param is the argument you passed to the function
  // e is the event object that returned
};

就像这样使用它：

onClick={this.viewMore("some param")}

以下是先前答案的更新和概述：

1. 通过使用的onClick = {this.viewMore.bind（此，属性Id）} @HenrikAndersson 。而这种方法提供它使用的绑定的语法与许多不舒服的目的。

2. 使用@ZenMaster提到的公共类字段。这个解决方案或多或少具有相同的性能，它还带有更好的语法。但是当我们必须传递一个参数时就变得很棘手了。

   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>
       );
     }
   }
   

上面提到的方法跳过了传递参数，而是使用自定义属性来访问点击处理程序中所需的数据。

更好的解决方案是：

class MyComponent extends React.Component {

    handleClick = (item) => (e) => {
        e.preventDefault()    
        console.log(`This has access to item ${item}! and event(e)`)
    }

    render(){
        const item={ id:'1', value: 'a' }
        return(
            <button onClick={ this.handleClick(item) }  >Click</button>
        )
    }

}

参考：在 React 应用中通过箭头函数处理事件