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

Question

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

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

引导表

<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所指出的，你可能打算在第二个TableHeaderColumn中写ref={tagCol}。

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

引用 React 文档：

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

因此，正确的代码是：

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