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

可以在参数之间传递值

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

在这个场景中，我将列值传递给函数。

只需创建一个这样的函数

  function methodName(params) {
    //the thing  you wanna do
  }

在你需要的地方打电话

 <Icon onClick = {() => { methodName(theParamsYouwantToPass);} }/>

有很多性能方面的考虑，都是在真空中。这个处理程序的问题是，您需要讨好它们，以便将无法在props中命名的参数合并进来。这意味着组件需要每个可单击元素的处理程序。让我们同意，对于几个按钮来说，这不是问题，对吧？当您处理具有数十列和数千行的表格数据时，就会出现问题。在这里，您会注意到创建这么多处理程序的影响。

事实是，我只需要一个。我将处理程序设置在表级别（或UL或OL…），当单击发生时，我可以使用事件对象中的可用数据来判断单击的单元格：

nativeEvent.target.tagName
nativeEvent.target.parentElement.tagName 
nativeEvent.target.parentElement.rowIndex
nativeEvent.target.cellIndex
nativeEvent.target.textContent

我使用标记名字段检查单击是否发生在有效元素中，例如忽略页脚中的单击。rowIndex和cellIndex提供了所单击单元格的确切位置。Textcontent是单击单元格的文本。

这样，我不需要将单元格的数据传递给处理程序，它可以自助处理。如果我需要更多的数据，不需要显示的数据，我可以使用dataset属性或隐藏元素。通过一些简单的DOM导航，一切都在手边。自从PC更容易陷入困境以来，HTML中就一直使用这种方式。

使用箭头功能：

您必须安装阶段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; 

我会这样做：

const HeaderRows = props => {
    const handleSort = value => () => {

    }

    return <tr>
        {props.defaultColumns.map((column, i) =>
            <th key={i} onClick={handleSort(column)}>{column}</th>)}
        {props.externalColumns.map((column, i) => {
            // Multi dimension array - 0 is column name
            const externalColumnName = column[0]
            return (<th key={i}>{externalColumnName}</th>)
        })}
    </tr>
}