Question

我目前有（TableHeader组件）表头使用onClick处理程序呈现，在触发时，捕获标头的值并在Parent组件中设置状态（Parent是Table组件，child是TableHeader）

我想避免在TableHeader的render方法中绑定onClick函数，同时仍然保持对Parent组件上下文的访问。目前我所拥有的：

render() {
  return (
  ...
    <tr>
      {columns.map(col => <th key={col} onClick={this.props.onClick.bind(null, col)} {...hoverHandlers}>{col}</th>)}
    </tr>
  )
}

传递给每个th的函数只是获取列的值并相应地进行排序。

在父组件的构造函数中，该函数被绑定：

this.sortColumns = this.sortColumns.bind(this);

然后通过：

<TableHeader onClick={this.sortColumns} />

Answer 1

更改sortColumns()以将col变量作为参数。然后更新render()以传递变量。

render() {
  return (
   ...
   <tr>
     {columns.map(col => <th key={col} 
        onClick={function() { this.props.onClick(col) } } 
        {...hoverHandlers}>{col}</th>)}
   </tr>
   )
}

避免在Render中绑定，同时保持父组件的上下文

1 个答案: