ui變化反應后聚焦元素和位置

Question

我有一個數據列表。 我將此列表顯示為表格。 列表的每個項目是表的行。

class EditOrderItemField extends Component {
  render(){
    return (
   <div
      ref={(el) => {
         this.eachField = el;
      }}
    >
      {this.renderTagOrForm()}
   </div>
  );
  }
openForm() {
    console.log(this.eachField);
    this.setState({ edit: true }, () => {
        this.eachField.focus({preventScroll: false});
    });
}

    renderInputOrLabel(listItem) {
    const { edit } = this.state;
    this.save[listItem.key] = listItem.value;
    if (edit) {
        return (
            <Form
                onCancel={this.cancel}
                onChange={this.onChangeText}
            />
        );
    }
    return (
        <button
            className={'control-label'}
            onDoubleClick={() => this.openForm()}
            style={{
                position: 'absolute',
                top: 2,
                bottom: 2,
                left: 2,
                right: 2,
                cursor: 'pointer',
            }}
        >
            {listItem.value}
        </button>
    );
}

}

在 doubleClick 上，我正在顯示表單。 表單的高度比按鈕高。 因此，即使在 ui 中更改后pageYOffset(window.pageYOffset)相同，我也看不到我的表單。我的表單在頁面中至少向下 700px。

我想看看更改后的表格。 為此，我創建了一個參考，在setState之后，我關注了該參考。 this.eachField.focus({preventScroll: false}); .

但這並沒有幫助。 在這種情況下我能做什么。

Answer 1

我想在引入新元素進行編輯后，它會增加表格行高。 這就是為什么即使您的 pageYOffset 與您的實際內容被推送的內容相同。 因此，一種簡單的解決方案是設置表格行上限的高度。 這樣即使在編輯元素出現后，相對滾動位置也將保持不變。

<tr style="height: 150px">YOUR ELEMENTS</tr>