Как я могу изменить положение после редактирования значения таблицы в React?

Question

Существует пользовательский интерфейс, который я создал с помощью React. Есть два текстовых поля для ввода значения, после ввода и сохранения эти значения будут заполнены в таблице под двумя полями (мы используем antd для проектирования).

Однако, когда я щелкаю одну запись в таблицеи нажмите кнопку «Изменить» в этой конкретной записи, данные из этой записи будут заполнены в вышеупомянутых текстовых полях. Когда это происходит, я хочу, чтобы мое приложение прокручивало вверх и показывало те два текстовых поля, которые готовы к редактированию.

Но в настоящее время оно остается на той же позиции после нажатия кнопки «Изменить», без прокрутки вверх и отображения двух текстовых полей. Вот изображение, описывающее мой опыт

Answer 1

• Как правило, вы хотите установить фокус на некоторый компонент после повторного рендеринга.
• Для ссылки на конкретный компонент используйте ref ref

• сделать ref refтого, что вы хотите, чтобы установить фокус и назначить его в качестве опоры реф

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

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

• Бар - это компонент, для которого вы хотите установить фокус
• , в вашем случае он может быть родителем обоих полей ввода или любого из полей ввода

Answer 2

Проверьте этот ответ, чтобы узнать, как управлять srollTop: https://stackoverflow.com/a/55184755/2360631

Но я не думаю, что это хорошая идея, может быть, вы можете рассмотреть возможность замораживания области редактирования, иначе, когда вы закончите редактирование, вам может понадобитьсячтобы прокрутить снова ...