我认为，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>

我通过两种方式向方法添加了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>);
    }
});

使用封口，可获得干净的解决方案：

<th on单击=｛this.handleSort（column）｝>｛column｝</th>

handleSort函数将返回已设置值列的函数。

handleSort: function(value) { 
    return () => {
        console.log(value);
    }
}

当用户单击th时，将使用正确的值调用匿名函数。

例子：https://stackblitz.com/edit/react-pass-parameters-example

有两种方法可以在事件处理程序中传递参数，以下是一些方法。

可以使用箭头函数环绕事件处理程序并传递参数：

<button onClick={() => this.handleClick(id)} />

上面的示例等效于调用.bind，也可以显式调用bind。

<button onClick={this.handleClick.bind(this, id)} />

除了这两种方法之外，还可以将参数传递给定义为咖喱函数的函数。

handleClick = (id) => () => {
    console.log("Hello, your ticket number is", id)
};

<button onClick={this.handleClick(id)} />

如果您正在使用ES6，您可以简单地执行此操作。

export default class Container extends Component {
  state = {
    data: [
        // ...
    ]
  }

  handleItemChange = (e, data) => {
      // here the data is available 
      // ....
  }
  render () {
     return (
        <div>
        {
           this.state.data.map((item, index) => (
              <div key={index}>
                  <Input onChange={(event) => this.handItemChange(event, 
                         item)} value={item.value}/>
              </div>
           ))
        }
        </div>
     );
   }
 }

您可以这样使用代码：

<th value={column} onClick={(e) => that.handleSort(e, column)} >{column}</th>

这里e表示事件对象，如果您想在句柄函数中使用preventDefault（）之类的事件方法，或者想获得e.target.name之类的目标值或名称。