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

我想读取onclick事件值属性。但是当我点击它时,我在控制台上看到类似的东西:

SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target

我的代码工作正常。当我运行时,我可以看到{column}但在onclick事件中无法获得它。
我的代码:
var HeaderRows = React.createClass({
    handleSort:  function(value) {
       console.log(value);
    },
    render: function () {
        var that = this;
        return(
        <tr>
            {this.props.defaultColumns.map(function (column) {
                return (
                    <th value={column} onClick={that.handleSort} >{column}</th>
                );
            })}
            {this.props.externalColumns.map(function (column) {
                // Multi dimension array - 0 is column name
                var externalColumnName = column[0];
                return ( <th>{externalColumnName}</th>
                );
            })}

        </tr>);
    }
});

如何将值传递给react js中的onClick事件?


最佳答案:

简单的方法
使用箭头函数:

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

这将创建一个使用正确参数调用handleSort的新函数。
更好的方法
Extract it into a sub-component.
在render调用中使用arrow函数的问题是,它每次都会创建一个新函数,最终导致不必要的重新渲染。
如果创建子组件,则可以传递处理程序并使用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>
);