我有一个react应用程序，它有多个页面，这些页面重用了一个banner组件。每当在屏幕上执行操作时，结果将显示在成功/错误信息横幅的顶部。在这里，当用户关闭横幅（不是自动关闭）时，我很难将焦点切换回页面上的前一个元素（不是导致横幅事件的元素，用户可能会在横幅之后继续页面）。在banner上使用onDismiss来跟踪活动元素将转到页面的主体。有人能帮我吗？PS：很抱歉，我不能在这里分享代码。我尝试将document.activeElement传递给handleClose。
m3eecexj1#
实现此目的的一种方法是在banner dismiss时执行回调，并且需要设置焦点的元素所在的页面将结合使用document.getElementById（）或document.querySelector（）（如果ID未设置）来处理它。伪例
<MessageBar onSubmitCallback={this._exeCallback} private _exeCallback = (): void => { const elemToFocus = document.getElementById('${element-id}') if (elemToFocus) { elemToFocus.focus() } }
Message bar将回调（可选）添加到其props
Message bar
type MessageBarProps = componentProps & { onSubmitCallback?: () => void} private _onDismiss = () => { if (this.props.onSubmitCallback} { this.props.onSubmitCallback() }
1条答案
按热度按时间m3eecexj1#
实现此目的的一种方法是在banner dismiss时执行回调，并且需要设置焦点的元素所在的页面将结合使用document.getElementById（）或document.querySelector（）（如果ID未设置）来处理它。
伪例
Message bar将回调（可选）添加到其props