僅使用ReactJS專注於自定義模態

Question

我是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？

Answer 1

在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();
            }
        }
    }
}

Answer 2

上面的答案是正確的。 但是我們還需要添加

    // This is needed to properly add and remove the keydown event listener
    this._restrictFocus = _.bind(this._restrictFocus, this);

在react組件的構造函數中。 否則，它似乎不起作用。

希望這可以幫助。