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

Question

我想阅读onClick事件值属性。但是当我单击它时，在控制台上会看到类似以下的内容：

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

我的代码正常工作。运行时，我可以{column}在onClick事件中看到但无法获取它。

我的代码：

var HeaderRows = React.createClass({
  handleSort:  functhtml" target="_blank">ion(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>
    );
  }
});

如何onClick在React js中将值传递给事件？

Answer 1

简单的方法

使用箭头功能：

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>
);