Question

我制作了一个组件，我正在渲染项目的网格。单击一个项目时，正在选择该项目。但是有很多项目存在，所以有滚动条。每当我点击一个Item时，组件就会被重新渲染（因为我将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)

零件代码如下：

全屏：

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)}。

您阻止违约的事件（以实际方式停止传播）不是来自点击的真实事件，而是一个合成的事件，当没有事件时，可以召唤该事件来填写事件。您需要停止传播真实事件希望这会有所帮助。

项目点击，项目重新渲染和滚动到顶部是不希望的

1 个答案: