React组件在更新期间滚动

Question

我有一个文本框，应该用于过滤表格的内容。每次用户键入内容时，都会调度一个操作，该操作向服务器发出所需数据的请求。

事情是：每次用户输入内容时，页面几乎完全滚动到底部。我想也许是因为组件的更新。

为了隔离问题，我删除了除了编辑框以外的所有内容，结果是相同的。这是预先输入的情况：

这是通过在框中输入操作触发后发生的事情：

我显然做错了什么，虽然我无法弄清楚是什么。这是我的代码（为清晰起见，删除了杂乱）：

  handleSearch(event) {
    const { dispatch, id } = this.props;

    dispatch(filterData(id, event.target.value));
  }

  render() {
    return (
      <form>
        <FormGroup>
          <InputGroup>
            <FormControl type="text" onChange={this.filterData}/>
          </InputGroup>
        </FormGroup>
      </form>
    );
  }

知道我在这里缺少什么吗？

Answer 1

经过几个小时的调试后，我找到了原因：在搜索过程中，我显示了一个＆＃34;正在加载......＆＃34;写信提醒用户搜索正在进行中。加载部分比表格短得多，因此页面相应地滚动到高度变化的偏移：从800px到100px。我没有找到更优雅的解决方案，所以目前我将加载屏幕限制在与桌面相同的高度。