反応にエスケープを入力するときにローダーを取り除くには？

Question

エスケープボタンを押した後、ページが読み込まれるまでに時間がかかる場合があります。私はそれが私はあなたがイベントにリスナーすなわちからkeyupまたはのKeyDownを追加する必要があります

dispatcher.dispatch({ 
    type:'Loader', 
    showLoader: true 
}) 

Answer 1

を使用していますロードするための

長い時間がかかるときに読み込みを終了する必要があります。いずれかのキーが押されたとき、ちょうど脱出ボタンのキーコード、すなわち27

にしてそのキーコードを比較するイベントリスナーがcomponentDidMountに追加され、componentWillUnmountに除去する必要があり、反応します。

ここは例です。要件に応じてロジックを変更できます。

class App extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     loading: true, 
    } 
    this.onKeyUp = this.onKeyUp.bind(this) 
    } 
    componentDidMount() { 
    document.body.addEventListener('keyup', this.onKeyUp) 
    } 
    componentWillUnmount() { 
    document.body.removeEventListener('keyup', this.onKeyUp) 
    } 
    onKeyUp(e) { 
    if (/27/.test(e.keyCode)) { 
     this.setState({ loading: false }) 
    } 
    } 
    render() { 
    if (this.state.loading) { 
     return <div>Loading</div> 
    } 
    return <div>Loaded</div> 
    } 
} 

希望します。