Question

我是新来的反应者。这是一个有一些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不是一个函数。

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

Answer 1

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

据我所知，react的滚动可与div配合使用，或者它需要一些插件，例如jQuery oe窗口

无论如何，您也可以尝试使用此方法（在最后一种情况下，这不是一个好选择）： document.body.scrollTo（）

以供进一步参考：

Answer 2

因为this.myRef获得了UserJobsTabel的实例。您可以改为转发裁判。

https://reactjs.org/docs/forwarding-refs.html

Answer 3

使用this.myRef.current?.getNode().scrollTo({ x: 0, y: 0})

反应scrollTo不是一个函数

3 个答案: