只需创建一个这样的函数

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

在你需要的地方打电话

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

简单的方法

使用箭头功能：

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

这将创建一个新函数，该函数使用正确的参数调用handleSort。

更好的方式

将其提取到子组件中。在渲染调用中使用箭头函数的问题是，它每次都会创建一个新函数，最终导致不必要的重新渲染。

如果创建子组件，则可以传递处理程序并使用props作为参数，然后仅在props更改时重新渲染（因为处理程序引用现在从未更改）：

子组件

class TableHeader extends Component {
  handleClick = () => {
    this.props.onHeaderClick(this.props.value);
  }

  render() {
    return (
      <th onClick={this.handleClick}>
        {this.props.column}
      </th>
    );
  }
}

主要部件

{this.props.defaultColumns.map((column) => (
  <TableHeader
    value={column}
    onHeaderClick={this.handleSort}
  />
))}

旧简易方式（ES5）

使用.bind传递所需的参数，这样可以将函数与Component上下文绑定：

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

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

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

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

需要简单更改：

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

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

使用this.handleSort。js中没有关键字。谢谢兄弟。

onClick={this.handleSort}

如果您正在使用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>
     );
   }
 }