有三种方法可以处理此问题：-

将构造函数中的方法绑定为：-导出类HeaderRows扩展组件{构造器（）{super（）；this.handleSort=this.handleSort.bind（this）；}}将箭头函数创建为：-手柄端口=（）=>{//这里有些文字}第三种方式是：-<th value＝｛column｝onClick＝｛（）＝＞that.handleSort｝＞｛column｝</th＞

使用箭头功能：

您必须安装阶段2：

npm安装babel-preset-stage-2：

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value=0
        }
    }

    changeValue = (data) => (e) => {
        alert(data);  //10
        this.setState({ [value]: data })
    }

    render() {
        const data = 10;
        return (
            <div>
                <input type="button" onClick={this.changeValue(data)} />
            </div>
        );
    }
}
export default App; 

如今，有了ES6，我觉得我们可以使用更新的答案。

return (
  <th value={column} onClick={()=>this.handleSort(column)} >{column}</th>
);

基本上，（对于任何不知道的人）由于onClick期望传递给它一个函数，所以bind可以工作，因为它创建了一个函数的副本。相反，我们可以传递一个箭头函数表达式，它只调用我们想要的函数，并保留它。您应该永远不需要在React中绑定渲染方法，但如果由于某种原因，您在某个组件方法中丢失了这一点：

constructor(props) {
  super(props);
  this.myMethod = this.myMethod.bind(this);
}

我认为，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事件值的示例。

我使用了es6语法。记住类内组件箭头函数不会自动绑定，所以在构造函数中显式绑定。

class HeaderRows extends React.Component {

    constructor(props) {
        super(props);
        this.handleSort = this.handleSort.bind(this);
    }

    handleSort(value) {
        console.log(value);
    }

    render() {
        return(
            <tr>
                {this.props.defaultColumns.map( (column, index) =>
                    <th value={ column } 
                        key={ index } 
                        onClick={ () => this.handleSort(event.target.value) }>
                        { column }
                    </th>
                )}

                {this.props.externalColumns.map((column, index)  =>
                    <th value ={ column[0] }
                        key={ index }>
                        {column[0]}
                    </th>
                )}
            </tr>
         );
    }
}

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

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

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

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

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

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