Refs 的功能组件中的无效挂钩调用答案

【问题标题】：Invalid Hook Call In Functional Component for RefsRefs 的功能组件中的无效挂钩调用
【发布时间】：2020-01-03 21:48:20
【问题描述】：

我正在尝试使用名为react-bootstrap-table 的包来构建带有标签的表结构。我在尝试处理将基于类的组件与功能组件相结合的引用时遇到问题。使用表格，我有创建标签的功能组件，当您单击每个单独的标签时，我希望单击以将该标签作为原始类输入的一部分填充输入。

我目前收到无效的钩子调用，所以我想知道是否有人有任何建议，看看我是否理解参考钩子是否正确反应。

引导表

<BootstrapTable data={this.state.literature} 
              striped
              hover
              pagination
              ignoreSinglePage
              search
              version='4'
              >
              <TableHeaderColumn isKey dataField='title' width='50%'>Title</TableHeaderColumn>
              <TableHeaderColumn dataField='tag' ref='tagCol' dataFormat = {tagFormatter} filter = { { type: 'TextFilter', delay: 300  }} width='12%'>Tags</TableHeaderColumn>

功能组件

// Tag formats
// Run a mapper on the tag column to generate x number of Tags for tag
function tagFormatter(cell, row) {
  const tagCol = React.useRef(null);

  const handleTagClick = (tag) => {
    tagCol.applyFilter(tag);
  }

  return (
    <div>
      {cell.map((tag, i) =>
        <span className="badge badge-pill badge-info" onClick={ e => this.handleTagClick(tag) } key = {i}>tag</span>
        )
      }

    </div>


  );    
}

【问题讨论】：

很难看出这些片段相对于彼此呈现在哪里，但您可能打算写“ref={tagCol}”（不是字符串值）。

标签： javascript reactjs react-hooks react-bootstrap

【解决方案1】：

正如@LincolnAnderson 所指出的，您可能打算在第二个TableHeaderColumn 中写ref={tagCol}。

此外，在handleTagClick 函数中，您以错误的方式访问ref。

引用React 文档：

本质上，useRef 就像一个“盒子”，可以在其.current 属性中保存一个可变值。

因此，正确的代码是：

  const handleTagClick = (tag) => {
    tagCol.current.applyFilter(tag);
  }

【讨论】：