[英]Focus on custom modal only using ReactJS
我是ReactJS的新手,并深陷其中。
我有一个自定义模式,只需单击按钮即可弹出。 该模式包含另外两个按钮。 当我开始按下选项卡按钮时出现问题。 :(焦点移到模态屏幕后面,用户可以与应用程序进行交互,这是严格的不!
我不能为此使用React模式。
有没有一种方法可以使用ReactJS / Javascript将焦点固定在最上面的模式div上。 到目前为止,我已经尝试了以下方法,但是它似乎无法正常工作。
请看一看。 任何帮助将不胜感激。
_focusRestrict() {
document.addEventListener('keydown', event => {
if (this.state.resetLifePlanner) {
//alert('Called');
event.stopPropagation();
const key = (event.keyCode ? event.keyCode : event.which);
switch (key) {
case 9:
if (document.activeElement.id === 'confirmButton') {
console.log('Called if:: move focus to cancelButton');
this.cancelButton.focus();
//React.findDOMNode(this.refs.cancelButton).focus();
//document.getElementById('cancelButton').focus();
}
else if (document.activeElement.id === 'cancelButton') {
console.log('Called else:: move focus to confirmButton');
this.confirmButton.focus();
//React.findDOMNode(this.refs.confirmButton).focus();
//document.getElementById('confirmButton').focus();
}
}
}
}, true);
}
componentDidMount() {
this._focusRestrict();
}
是否有ReactJS事件处理方式?
另外,有没有办法将事件绑定到div?
在event.stopPropagation();
,只需添加event.preventDefault();
卸载模态组件时,请不要忘记删除侦听器。 您必须将当前的匿名功能放置在命名功能中。
export default class ArtistList extends Component {
// ...
componentDidMount() {
document.addEventListener('keydown', handleKeydown, true);
}
componentWillunmount() {
document.removeEventListener('keydown', handleKeydown);
}
}
function handleKeydown(e) {
if (this.state.resetLifePlanner) {
//alert('Called');
event.stopPropagation();
event.preventDefault();
const key = (event.keyCode ? event.keyCode : event.which);
switch (key) {
case 9:
if (document.activeElement.id === 'confirmButton') {
console.log('Called if:: move focus to cancelButton');
this.cancelButton.focus();
//React.findDOMNode(this.refs.cancelButton).focus();
//document.getElementById('cancelButton').focus();
}
else if (document.activeElement.id === 'cancelButton') {
console.log('Called else:: move focus to confirmButton');
this.confirmButton.focus();
//React.findDOMNode(this.refs.confirmButton).focus();
//document.getElementById('confirmButton').focus();
}
}
}
}
上面的答案是正确的。 但是我们还需要添加
// This is needed to properly add and remove the keydown event listener
this._restrictFocus = _.bind(this._restrictFocus, this);
在react组件的构造函数中。 否则,它似乎不起作用。
希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.