ReactJS：在superagent ajax请求期间显示带有加载消息的模态

Question

我在ajax请求期间（使用superagent）显示加载消息的模式对话框时遇到问题。

我有一个reactjs应用程序，它有一个输入字段，一个按钮和一个模态区域。我希望它能像这样工作......

用户在输入字段中插入关键字并单击该按钮。
单击按钮后，将使用关键字从某个网站获取信息的ajax调用。
在ajax调用期间，会出现一个显示加载消息的模式对话框。
ajax调用结束后，将关闭模式对话框，并且将在输入字段下列出已被删除的信息列表。

我似乎无法得到3.工作。

这就是我所拥有的：我尝试了一个方法，在ajax调用之前和之后更改模态组件的道具。

任何帮助表示赞赏！

app.js

import React from 'react'
import ReactDOM from 'react-dom'
import PageBody from './pageBody'

ReactDOM.render(
     <PageBody />
    ,document.getElementById('root')
)

pageBody.js

import React, {Component} from 'react'
import Search from './Search'
import Modal from './modal'

export default class PageBody extends Component{
    constructor (props){
        super(props)
        this.state = {
             is_crawling: false
        }
    }

    crawlState (is_crawling) {
        this.setState({is_crawling: is_crawling})
    }

    render () {
        const show_modal = this.state.is_crawling
        this.crawlState = this.crawlState.bind(this)

        return (
            <div>
                <Search crawlState={this.crawlState}/>
                <Modal show_modal={show_modal}/>
            </div>
        )
    }
}

search.js

import React, {Component} from 'react'
import request from 'superagent'

export default class Search extends Component{
    constructor (props) {
        super(props)
        this.state = {
            keyword: ''
            ,result: []
        }
    }

    // method used to make ajax request
    crawl (){
        const keyword = this.state.keyword
        this.props.crawlState(true) // set crawlstate as true to show modal
        request // actual ajax request (superagent)
            .get('/crawl')
            .query({keyword: keyword})
            .end((err, res) => {
                if (err) console.log('superagent failed')
                const r = res.body.result
                this.setState({result: r})
            })
        this.props.crawlState(false) // set crawlstate as false to hide modal
    }

    onChangeHandler (e) {
        this.setState({keyword: e.target.value})
    }

    render () {
        const onChangeHandler = e => this.onChangeHandler(e)
        const crawl = this.crawl()
        const keyword = this.state.keyword
        const arr = this.state.result.map((e, idx) => {
            return <div key={idx}>{e}</div>
        })

        return (
            <div>
                <input type="text" onChange={onChangeHandler} value={keyword} />
                <button onClick={crawl}>CRAWL</button>
                {arr}
            </div>
        )
    }
}

modal.js

import React, {Component} from 'react'

export default class Modal extends Component{
    constructor (props) {
        super(props)
        this.state = {
            show: false
        }
    }

    componentWillReceiveProps(nextProps){
        const show_modal = nextProps.show_modal
        this.setState({show: show_modal})
    }

    render () {
       if (this.state.show){
            return <div id="modal"></div>
        } else {
            return null
        }
    }
}