Question

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


  );    
}

Answer 1

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

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

引用React文档：

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

因此，正确的代码应为：

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

功能组件中对引用的无效挂钩调用

1 个答案: