React js onClick无法将值传递给方法

简单的方法

使用箭头功能：

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

这将创建一个新的函数，

handleSort

更好的方法

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

如果创建子组件，则可以传递处理程序并将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

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