отреагировать scrollTo не является функцией - PullRequest
Новая
       32

отреагировать scrollTo не является функцией

1 голос
/ 18 марта 2019

Я новичок в реакции. Здесь у меня есть таблица, которая имеет 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 не является функцией.

Итак, есть ли способ сделать это? Или что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 18 марта 2019

потому что this.myRef получить экземпляр UserJobsTabel.Вместо этого вы можете пересылать ссылки.

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

0 голосов
/ 18 марта 2019

не могли бы вы попробовать изменить ref = {props.refer} с tbody на div таблицы? как это : <div className="table-responsive" ref={props.refer}>

насколько я знаю, свиток реакции реагирует на работу с div или ему нужны некоторые плагины, такие как jquery oe window

в любом случае вы также можете попробовать это (в последнем случае, к сожалению, это не очень хороший вариант): document.body.scrollTo ()

для дальнейшей справки: Метод JavaScript scrollTo ничего не делает?

...