时间戳

首页 > 解决方案 > Refs 的功能组件中的无效挂钩调用

javascript - Refs 的功能组件中的无效挂钩调用

问题描述

我正在尝试使用一个名为的包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>


  );    
}

标签： javascriptreactjsreact-hooksreact-bootstrap

解决方案

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

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

引用React文档：

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

因此，正确的代码是：

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

推荐阅读