时间戳

首页 > 解决方案 > react scrollTo 不是一个函数

javascript - react scrollTo 不是一个函数

问题描述

我是新来的反应。这里我有一个表，其中有一些td，现在单击按钮，我在该表中添加了一个 td。现在，表格也是可滚动的，所以，我想要的是当我们添加新行时表格滚动应该在顶部。因此，该用户将很容易知道该行已添加。

我试过的是，

我有一个容器，

JobList.js

constructre(props){
    super(props);
    this.myRef = React.createRef();
}

componentDidMount() {
    if (this.state.operationType) {
      this.props.changeOperationType(this.state.operationType);
    }
    if (!this.props.jobs) {
      this.props.fetchUserJd();
    }
    this.myRef.current.scrollTo(0, 0);
  }


render() {
   return(
      <UserJobsTabel
              jobList={filteredList}
              sortAscending={this.sortData}
              sortCountAndScoreAscending={this.sortNumbersAscending}
              addNewRow={this.addNewRow}
              isRowAddingEditorVisible={this.props.isRowAddingEditorVisible}
              removeRow={this.removeRow}
              refer={this.myRef}/>
   )
}

UserJobsTable.js

<div className="table-responsive">
    <table>
    <thead>
     <tr className="text-center">
            <th></th>
            <th scope="col">Technology<i className="fa fa-fw fa-sort sort-icon"></i></th>
            <th scope="col">Total Resumes<i className="fa fa-fw fa-sort sort-icon"></i></th>
            <th scope="col">Job Title<i className="fa fa-fw fa-sort sort-icon"></i></th>
            <th scope="col">Total Score<i className="fa fa-fw fa-sort sort-icon"></i></th>
            <th scope="col">Average Score<i className="fa fa-fw fa-sort sort-icon"></i></th>
            <th></th>
          </tr>
</thead>
 <tbody className="text-center" ref={props.refer}>
 </tbody>
//remaining
   </div>

所以，在这里我得到了 scrollTo 不是函数的错误。

那么，有没有办法做到这一点？或者我做错了什么。

标签： javascriptreactjsreduxscrollreact-redux

解决方案

你能尝试将 ref={props.refer} 从 tbody 更改为 table 的 div 吗？像这样 ： <div className="table-responsive" ref={props.refer}>

据我所知，react 的滚动可以与 div 一起使用，或者它需要一些插件，例如 jquery oe window

无论如何你也可以试试这个（在最后一种情况下，这不是一个好的选择）：document.body.scrollTo()

供进一步参考： JavaScript scrollTo 方法什么都不做？

推荐阅读