时间戳

首页 > 解决方案 > 在 React 中编辑表值后如何重新定位？

javascript - 在 React 中编辑表值后如何重新定位？

问题描述

我使用 React 创建了一个 UI。输入值有两个文本字段，输入并保存后这些值将填充在两个字段下方的表格中（我们使用antd进行设计）。

但是，当我单击表中的单个记录并单击该特定记录中的编辑时，该记录中的数据将填充到上述文本字段中。发生这种情况时，我希望我的应用向上滚动并显示准备好编辑的这两个文本字段。

但目前它在单击编辑后保持在同一位置，没有向上滚动并显示两个文本字段。这是描述我的经历的图像

标签： javascripthtmlcssreactjsantd

解决方案

  • 基本上，您希望在重新渲染后将焦点设置到某个组件。
  • 要引用特定组件，请使用 react refs

  • 对您想要设置焦点的任何内容进行反应参考并将其分配为参考道具

    constructor() {
    super();
    this.foo = React.createRef();
  }

componentDidUpdate() {
    this.foo.current.focus();
  }

    <Bar ref={this.foo}> .... </Bar>

  • foo 是 ref 的名称

  • Bar 是您要设置焦点的组件
  • 在您的情况下，它可以是两个输入字段或任何一个输入字段的父级

推荐阅读