不知从何而来回答这个问题，但我认为，bind会奏效。找到下面的示例代码。

const handleClick = (data) => {
    console.log(data)
}

<button onClick={handleClick.bind(null, { title: 'mytitle', id: '12345' })}>Login</button>

需要简单更改：

使用＜th value＝｛column｝onClick＝｛that.handleSort｝＞｛column｝</th＞

而不是＜th value＝｛column｝onClick＝｛that.handleSort｝＞｛column｝</th＞

class extends React.Component {
    onClickDiv = (column) => {
        // do stuff
    }
    render() {
        return <div onClick={() => this.onClickDiv('123')} />
    }
}

我认为，React地图中的.bind（this，arg1，arg2，…）是错误的代码，因为它很慢！单个渲染方法中的.bind（this）的10-50-非常慢的代码。我是这样修复的：Render方法<tbody onClick={this.handleClickRow}>＜tr data id＝｛listItem.id｝＞的映射处理程序var id=$（ev.target）最近（'tr'）.data（）.id

完整代码如下：

类MyGrid扩展了React.Component{//实际上，我是从Redux中connect设置的道具中得到的状态={列表：[｛id:1，姓名：“Mike”｝，｛id:2，名称：“Bob”｝，｛id:3，名称：“弗雷德”｝],selectedItemId:3}渲染（）{const｛list，selectedItemId｝=this.stateconst｛handleClickRow｝=此返回(<表><tbodyonClick={handleClickRow}>｛list.map（listItem=>(<tr key＝｛listItem.id｝data id＝｛listItem.id｛className＝｛selectedItemId＝＝listItem.i？“selected”：“”｝><td>｛listItem.id｝</td><td>｛listItem.name｝</td></tr>))}</tbody></table>)}handleClickRow=（ev）=>{常量目标=ev.target//您可以使用您想要查找的带有ID的TR，我使用jQueryconst数据集=$（target）最近（'tr'）.data（）if（！dataset||！dataset.id）返回this.setState（｛selectedItemId:+dataset.id｝）alert（dataset.id）//玩得开心！}}ReactDOM.render（＜MyGrid/＞，document.getElementById（“ReactDOM”））表{边界塌陷：塌陷；}.选定td{背景色：rgba（0，0，255，0.3）；}<script src=“https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js“></script><script src=“https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js“></script><script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div id=“react dom”></div>

我对JSX onClick事件有以下3点建议-

实际上，我们不需要在代码中使用.bind（）或Arrow函数。您可以在代码中简单使用。您还可以将onClick事件从th（或ul）移动到tr（或li）以提高性能。基本上，您的n li元素将有n个“事件侦听器”。所以最后代码将如下所示：＜ul onClick＝｛this.onItemClick｝＞｛this.props.items.map（item=>＜li key＝｛item.id｝data itemid＝｛item.id｝｝＞...</li>)}</ul>//您可以在onItemClick方法中访问item.id，如下所示：onItemClick=（事件）=>{console.log（e.target.getAttribute（“item.id”））；}我同意上面提到的为ListItem和List创建单独的React组件的方法。然而，如果您有1000个li，那么将创建1000个Event Listener，这使得代码看起来很好。请确保您不应该有太多的事件侦听器。从“React”导入React；从“./ListItem”导入ListItem；导出默认类List扩展React.Component{/***这个List-react组件是一个通用组件，它将道具作为物品列表，并提供onlick*回调名称handleItemClick*@param｛String｝item-传递给调用者的item对象*/handleItemClick=（项）=>{if（this.props.onItemClick）{this.props.onItemClick（项）；}}/***render方法将项目列表作为道具，并包含ListItem组件*@returns｛string｝-返回项目列表*/render（）{返回(＜div＞｛this.props.items.map（item=><ListItem key={item.id}item={item}onItemClick={this.handleItemClick}/>)}</div>);}}从“React”导入React；导出默认类ListItem扩展React.Component{/***这个List-react组件是一个通用组件，它将道具作为物品，并提供onlick*回调名称handleItemClick*@param｛String｝item-传递给调用者的item对象*/handleItemClick=（）=>{if（this.props.item&&this.props.onItemClick）{this.props.onItem单击（this.props.项）；}}/***render方法将项目作为道具，并在li中打印*@returns｛string｝-返回项目列表*/render（）{返回(<li key={this.props.item.id}onClick={this.handleItemClick}>{this.props.item.text｝</li>);}}

另一个不涉及.bind或ES6的选项是使用带有处理程序的子组件来调用带有必要属性的父处理程序。下面是一个示例（下面是工作示例的链接）：

var HeaderRows = React.createClass({
  handleSort:  function(value) {
     console.log(value);
  },
  render: function () {
      var that = this;
      return(
          <tr>
              {this.props.defaultColumns.map(function (column) {
                  return (
                      <TableHeader value={column} onClick={that.handleSort} >
                        {column}
                      </TableHeader>
                  );
              })}
              {this.props.externalColumns.map(function (column) {
                  // Multi dimension array - 0 is column name
                  var externalColumnName = column[0];
                  return ( <th>{externalColumnName}</th>
                  );
              })}
          </tr>);
      )
  }
});

// A child component to pass the props back to the parent handler
var TableHeader = React.createClass({
  propTypes: {
    value: React.PropTypes.string,
    onClick: React.PropTypes.func
  },
  render: function () {
    return (
      <th value={this.props.value} onClick={this._handleClick}
        {this.props.children}
      </th>
    )        
  },
  _handleClick: function () {
    if (this.props.onClick) {
      this.props.onClick(this.props.value);
    }
  }
});

基本思想是父组件将onClick函数传递给子组件。子组件调用onClick函数，可以访问传递给它的任何属性（以及事件），允许您在父组件的onClick功能中使用任何事件值或其他属性。

下面是一个CodePen演示，演示了该方法的实际操作。