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

我通过两种方式向方法添加了onclick事件值传递的代码。1.使用结合方法2。使用箭头（=>）方法。请参见handlesort1和handlesort方法

var HeaderRows  = React.createClass({
    getInitialState : function() {
      return ({
        defaultColumns : ["col1","col2","col2","col3","col4","col5" ],
        externalColumns : ["ecol1","ecol2","ecol2","ecol3","ecol4","ecol5" ],

      })
    },
    handleSort:  function(column,that) {
       console.log(column);
       alert(""+JSON.stringify(column));
    },
    handleSort1:  function(column) {
       console.log(column);
       alert(""+JSON.stringify(column));
    },
    render: function () {
        var that = this;
        return(
        <div>
            <div>Using bind method</div>
            {this.state.defaultColumns.map(function (column) {
                return (
                    <div value={column} style={{height : '40' }}onClick={that.handleSort.bind(that,column)} >{column}</div>
                );
            })}
            <div>Using Arrow method</div>

            {this.state.defaultColumns.map(function (column) {
                return (
                    <div value={column} style={{height : 40}} onClick={() => that.handleSort1(column)} >{column}</div>

                );
            })}
            {this.state.externalColumns.map(function (column) {
                // Multi dimension array - 0 is column name
                var externalColumnName = column;
                return (<div><span>{externalColumnName}</span></div>
                );
            })}

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

交替尝试回答OP的问题，包括e.preventDefault（）调用：

渲染链接（ES6）

<a href="#link" onClick={(e) => this.handleSort(e, 'myParam')}>

组件功能

handleSort = (e, param) => {
  e.preventDefault();
  console.log('Sorting by: ' + param)
}

您只需要使用Arrow函数来传递值。

<buttonClick={（）=>this.props.onClickHandle（“StackOverFlow”）}>

确保使用（）=>，否则将在没有单击事件的情况下调用单击方法。

注意：崩溃检查默认方法

请在下面的codesandbox中找到相同的运行代码。

用方法反应传递值

这个例子可能和你的有点不同。但我可以向你保证，这是解决这个问题的最佳方案。我已经找了好几天没有性能问题的解决方案。终于想出了这个。

class HtmlComponent extends React.Component {
  constructor() {
    super();
    this.state={
       name:'MrRehman',
    };
    this.handleClick= this.handleClick.bind(this);
  }

  handleClick(event) {
    const { param } = e.target.dataset;
    console.log(param);
    //do what you want to do with the parameter
  }

  render() {
    return (
      <div>
        <h3 data-param="value what you wanted to pass" onClick={this.handleClick}>
          {this.state.name}
        </h3>
      </div>
    );
  }
}

更新

如果您想处理应该作为参数的对象。您可以使用JSON.stringify（对象）将其转换为字符串并添加到数据集。

return (
   <div>
     <h3 data-param={JSON.stringify({name:'me'})} onClick={this.handleClick}>
        {this.state.name}
     </h3>
   </div>
);