单击项目时，项目会重新呈现并滚动到不需要的顶部

Question

我已经制作了一个组件，其中我正在渲染项目的网格。单击一个项目时，该项目处于选中状态。然而，有许多项目存在，所以有滚动条。每当我单击某个项时，组件都会重新呈现(因为我将selectedItem置于我的状态)，这会进一步重新呈现所有其他项。但是，当我在滚动到底部(或中间)后单击一个项目时，组件会呈现到顶部，但我希望它保持在被单击的位置。

组件如下所示：

Full-Screen (made using react-portal, contains onClick and changes its state)
    --TilesView (all tiles wrapper which renders all the tiles and has an ajax call)
        --all Tiles (single tile element)

部件代码如下：

FullScreen：

componentDidMount() {
    if (this.props.selectedPost) {
      this.setState({
        selectedPost: {
          [this.props.selectedPost[0]]: true
        }
      });
    }
  }

render() {
    const that = this;
    //Todo: User fullpage header when space is updated
    return (
      <Portal container={() => document.querySelector('body')}>
        <div className={styles.container}>
          <FullPageForm onHide={that.props.onCancel} closeIcnLabel={'esc'} bgDark={true}>
            <FullPageForm.Body>
              <span className={styles.header}>{'Select Post'}</span>
              <div className={styles.body}>
                <ExistingAssets onCreativeTileClicked={this.handlePostClick}
                                selectedCreatives={this.state.selectedPost}
                                showSelectedTick/>
              </div>
            </FullPageForm.Body>
          </FullPageForm>
        </div>
      </Portal>
    );
  }

  handlePostClick = (adCreativeAsset, id) => {
    event.preventDefault();
    this.setState({
      selectedPost: {
        [id]: adCreativeAsset
      }
    });
  }

在我的handlePostClick中，我试着使用event.preventDefault()，但它不起作用。我不知道为什么会发生这种情况，提前谢谢。

Answer 1

尝试将handlePostClick定义更改为

handlePostClick = (e, adCreativeAsset, id) => {
    e.preventDefault();
    //blah blah what you want
}

在您的JSX中，将onCreativeTileClicked={this.handlePostClick}更改为onCreativeTileClicked={this.handlePostClick.bind(this)}。

你正在阻止的事件-默认(停止实际的传播)不是来自点击的真实事件，而是一个合成的事件，可以在没有事件的时候被召唤来填补事件。您需要停止真实事件的传播。

希望这能有所帮助。