ReactJSのみを使用してカスタムモーダルに焦点を合わせる

Question

私はReactJSを初めて使用していて、何かにひどく立ち往生しています。

ボタンをクリックするとポップアップするカスタムモーダルがあります。このモーダルには2つのボタンがあります。タブボタンを押すと問題が発生します。 :(モーダル画面とユーザーの後ろ フォーカスが移動すると、私はこの1つのためのモーダルを反応させるのに使用することはできません厳格ななしなし！

あるアプリケーションと相互作用することができる。

する方法があります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); 

を追加する必要があります。それ以外の場合は動作していないようです。

これが役に立ちます。