how can I Re-position after editing a table value in React?

Question

There is an UI I have created using React. There are two text fields to enter value, after entering and saving those values will be populated in a table below the two fields(we are using antd for designing).

However when I click a single record in the table and click edit in that particular record data from that record will be populated to the above mentioned text fields. When this happens I want my app to scroll up and show those two text fields which are ready to be edited.

But currently it stays at the same position after clicked edit, without scrolling up and showing two text fields. Here's an image descripting my experience

Answer 1

Check this answer to find how to control srollTop: https://stackoverflow.com/a/55184755/2360631

But I don't think it's a good idea, maybe you can consider to freeze the edit area otherwise when you finish edit you may need to scroll back again...

Answer 2

• Basically you want to set focus to some component after a re-render.
• To refer to a particular component, use react refs

• make a react ref of whatever you want to set focus to and assign it as a ref prop

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

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

• foo is the name of ref

• Bar is the component you want to set focus to
• in your case it can be a parent of both input fields or any one of the input fields