当我们单击 React JS 中的添加行按钮时，如何自动滚动到表格中新添加的行答案

【问题标题】：How to scroll to newly added row in a table automatically when we click on add row button in React JS当我们单击 React JS 中的添加行按钮时，如何自动滚动到表格中新添加的行
【发布时间】：2020-01-03 09:36:50
【问题描述】：

我正在使用 Material UI 的 Table 组件在 react 中创建表格。我正在对表执行 CURD 操作。在一个表中一次只能看到六行。如果我们想查看更多记录，需要向下滚动并查看剩余的行。问题是当我单击添加行按钮时，正在添加新行，但是焦点没有移动到新添加的行（它应该自动向下滚动）。在表格行的第一列中，创建了文本字段。当我添加行时，它应该聚焦该文本字段。我尝试使用 focus() 方法，但它不起作用。提前致谢。

【问题讨论】：

请分享我们不能盲目回答的代码它对社区没有帮助
问题解决了吗？遇到同样的问题，找不到解决办法......

标签： javascript reactjs

【解决方案1】：

scrollIntoView() 足以滚动到任何元素。我为你创建了一个演示。希望它可以提供帮助。

请以全页模式查看此演示。

class App extends React.Component{
  rows = new Array(50).fill(0);
  lastRowRef;
  
  render(){
    return(
      <React.Fragment>
        <button onClick={this.scrollToLastRow}>scroll to last row</button>
        <div>
          <table>
          {
            this.rows.map((row,i)=>
              <tr key={i} ref={(i===this.rows.length-1)? (r) => this.lastRowRef=r: null}>
                <td>{i+1}</td>
                <td>Row {i+1}</td>
              </tr>
            )
          }
          </table>
        </div>
      </React.Fragment>
    );
  }
  
  scrollToLastRow=()=>{
    if(this.lastRowRef){
      this.lastRowRef.scrollIntoView();
    }
  }
}

ReactDOM.render(<App/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：

这不是他所追求的。他在问如何滚动到新添加的行。例如，在您的示例中，将“滚动到最后一行”按钮替换为“添加新行”按钮，该按钮会在底部添加新行。然后滚动到它。

【解决方案2】：

这是我制作的示例代码：

在 render() 方法上面添加这个函数：

addRowAndScroll = () => {
    var tableBody = document.getElementById('someTableBody');
    var tableBodyLength = tableBody.childNodes.length;
    tableBody.innerHTML += `<tr><td>test</td></tr>`;
    tableBody = document.getElementById('someTableBody');
    tableBody.childNodes[tableBodyLength].scrollIntoView();
}

这里是 HTML。请注意，在按钮上单击 addRowAndScroll 正在被调用。这会将行添加到表中，然后将视图滚动到添加的行。

render() {
    return (
        <div>
            <button onClick={ ()=> this.addRowAndScroll() }>Add Row</button>   
            <table>
                <thead><tr><th>Company</th></tr></thead>
                <tbody id="someTableBody">
                    <tr><td>Alfreds Futterkiste</td></tr>
                    <tr><td>Centro comercial Moctezuma</td></tr>
                    <tr><td>Ernst Handel</td></tr>
                    <tr><td>Island Trading</td></tr>
                    <tr><td>Laughing Bacchus Winecellars</td></tr>
                </tbody>
            </table>
        </div>
    )
}

【讨论】：