Close the mode box in react, how to implement component update? - Codes Helper

Click to save on the

page, and after the ajax request is successful, close the modal box, how can you automatically refresh in the parent component?
if all the data in the parent component of this.setState, is traversed by the ajax request, you don"t know which part to set this.setState in.
attach the code: thank the kind-hearted person ~

< hr >

:HostActionList.jsx
import React, { Component, PropTypes } from "react"
import { Link, withRouter } from "react-router"
import { Tooltip, Popconfirm, Form, Select, Modal, message } from "antd"
const FormItem = Form.Item;
const Option = Select.Option;
import ajax from "../../common/ajax"
import Auth from "../../common/Auth"
import { Action, ActionList } from "../../common/Actions"
import ReadModal from "./HostReadModal"
import UpdateModal from "./HostUpdateModal"


@withRouter
export default class MyActionList extends React.Component {
  constructor(props) {

    super(props);
    this.state = {
      readModalShow: false,
      updateModalShow:false,
      statusList:""
    }
  }



  handleDelete() {
    const {itemId, item, reload} = this.props
    console.log(item[itemId] )
    ajax({
      url: "/ndasec/host/delete.do",
      type: "post",
      data: { host_id: item[itemId] },
      success: p => {
        if (p.success) {
          message.success(p.msg);
          reload();
        } else {
          message.error(p.msg)
        }
      }
    })
  }

  handleRead() {
    this.setState({ readModalShow: true })
    const {itemId, item, reload} = this.props
        // console.log(item[itemId] )
        // console.log(this.props)
    console.log(this.props.item)
    ajax({
      url: "/ndasec/host/detail.do",
      type: "post",
      data: { host_id: item[itemId] },
      success: p => {
        if (p.success) {
           console.log(p.data)
          this.setState({
            statusList:p.data
          })
        } else {
          message.error(p.msg)
        }
      }
    })
  }

  handleUpdate(data) {
    this.setState({ updateModalShow: true })
    const {itemId, item} = this.props
    console.log(item.host_id)
    ajax({
      url: "/ndasec/host/detail.do",
      type: "post",
      data: { host_id: item[itemId] },
      success: p => {
        if (p.success) {
          // console.log(p.data)
          this.setState({
            statusList:p.data
          })
        } else {
          message.error(p.msg)
        }
      }
    })
  }


  render() {
    const {readModalShow,updateModalShow}=this.state
    const {item, reload} = this.props
    const {is_system: isSystem} = item



    const DeleteAction = () => (
      <Auth code="host-delete">
        <Action tooltip=""
          icon="fa-remove"
          confirm=""
          onOk={this.handleDelete.bind(this)}
          />
      </Auth>
    )

    const UpdateAction = () => (
      <Auth code="template-policy-host-data-edit">
        <Action tooltip=""
          icon="fa-edit"
          onOk={this.handleUpdate.bind(this)}
          />
      </Auth>
    )

    const ReadAction = () => (
      <Auth code="template-policy-host-data-detail">
        <Action tooltip=""
          icon="fa-search"
          onOk={this.handleRead.bind(this)}
          />
      </Auth>
    )

    let actions
    if (isSystem == 1) {
      actions = [ReadAction]
    } else {
      actions = [ReadAction, UpdateAction, DeleteAction]
    }

    return (
      <ActionList>
        {actions.map((E, i) => <E key={i}></E>)}
        {readModalShow &&
        <ReadModal statusList={this.state.statusList} done={() => this.setState({ readModalShow: false, reload: true })}/>
        }
        {updateModalShow &&
        <UpdateModal statusList={this.state.statusList} done={() => this.setState({ updateModalShow: false, reload: true })}/>
        }
      </ActionList>
    )
  }
}

:HostUpdateModal.jsx

import * as React from "react";
import { Link, withRouter } from "react-router";
import { Form, Input, Button, Select, Radio, DatePicker, TimePicker, Checkbox, Table, Modal, Upload, Alert,message } from "antd";
import ajax from "../../common/ajax.js";
import s from "../../Main/Template/ImportModal.less";
import auth from "../../common/authService.js"
const {Dragger} = Upload;
const FormItem = Form.Item;
const { Option } = Select

@Form.create()
export default class extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      visible: true,
      statusList: []
    }
  }

  cancelUpdate=()=> {
    this.props.done();
  }



  handleReset=(e)=> {
    e.preventDefault();
    const { form } = this.props;
    form.resetFields();
    this.props.done();
  }

  handleSubmit(e){
    e.preventDefault();
    const { form } = this.props
    form.validateFields((errors, values) => {
      console.log(values)
      if (!!errors) {
        return;
      }
      this.updateHost(values);
    });
  }

  ajaxSuccess = p => {
    if (p.success) {
      console.log(p)
      console.log(this.props.statusList)
      message.success(p.msg);
      this.forceUpdate();
      this.props.done();
      //this.props.router.replace("/main/hello/host_list");

    } else {
      message.error(p.msg);
    }
  }




  updateHost(values){
    console.log(values);
    console.log(this.props.statusList.system_id)
    console.log(this.props.statusList.weight)
    console.log(values.system_id)
    this.setState({ isDoingSubmit: true })
    ajax({
      url: "/ndasec/host/edit.do",
      type: "post",
      data: {
        "host_id":this.props.statusList.host_id,
        "host_name":values.host_name,
        "host_ip": values.host_ip,
        "user_id": values.user_id,
        "system_id": values.system_id==="Windows XP"?1:values.system_id==="Windows 2000"?2:values.system_id==="Windows 2003"?3:values.system_id==="Windows 2008"?4:values.system_id==="Windows Vista"?5:values.system_id==="Windows 7"?6:values.system_id==="Windows 8"?7:8,
        "weight":values.weight===""?1:values.weight===""?2:3,
        "host_manager":values.host_manager,
        "manager_dept":values.manager_dept,
        "manager_email":values.manager_email,
        "manager_phone":values.manager_phone,
        "remark":values.remark
      },
      success:this.ajaxSuccess
    })
  }

  componentaDidMount(){
    const {  statusList } = this.state;
    ajax({
      url: "/ndasec/operatingsystem/queryList.do",
      type: "post",
      data:{system_id:this.props.statusList.system_id},
      success: (payload) => {
        if (payload.success) {
          const { data } = payload;
          this.setState({
            statusList: statusList.concat(data.map(e => ({ id: e.system_name, name: e.system_name }))),
            systemName:payload.data[0].system_name
          })
        }
      }
    })
  }


  render() {
    const {targets} = this.props
    const {form} = this.props;
    const {getFieldProps} = form;
    const {successMsg, errorMsg} = this.state;



    const footer = (
      successMsg &&
      <Alert message={successMsg} type="success" showIcon closeText="" onClose={this.cancelUpdate.bind(this)} />
      || errorMsg &&
      <Alert message={errorMsg} type="error" showIcon closeText="" onClose={this.cancelUpdate.bind(this)} />
    )

    return (
      <Modal className={s.modal}
             title=""
             visible={true}
             okText=""
             cancelText=""
             onCancel={this.cancelUpdate.bind(this)}
             footer={footer}
      >
        <Form>
          <FormItem
            label=""
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 14 }}
            help=" / 30 / / / : * ? " < > |"
          >
            <Input
                   {...getFieldProps("host_name",{
                     initialValue: this.props.statusList.host_name,
                     rules:[{
                       required: true, message: "~",
                     }]
                   }) }

            />
          </FormItem>
          <FormItem
            label="IP"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 14 }}
          >
            <Input
                   {...getFieldProps("host_ip",{
                     initialValue: this.props.statusList.host_ip,
                     rules:[{
                       required: true, message: "IP~",
                     }]
                   }) }
            />
          </FormItem>
          <FormItem
            label="ID"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 14 }}
          >
            <Input
                   {...getFieldProps("user_id") }
            />
          </FormItem>
          <FormItem
            label=""
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 14 }}
          >
            <Select
              placeholder=""
              {...getFieldProps("system_id",{
                initialValue:this.state.systemName
              })
              }
            >
              {this.state.statusList.map(e => <Option value={e.id.toString()} key={e.id}>{e.name}</Option>)}
            </Select>
          </FormItem>
          <FormItem
            label=""
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 14 }}
          >
            <Select
              showSearch
              optionFilterProp="children"
              notFoundContent=""
              {...getFieldProps("weight",{
                initialValue:this.props.statusList.weight===1?"":this.props.statusList.weight===2?"":""
              })
              }
            >
              <Option value=""></Option>
              <Option value=""></Option>
              <Option value=""></Option>
            </Select>
          </FormItem>
          <FormItem
            label=""
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 14 }}
          >
            <Input
                   {...getFieldProps("host_manager",{
                     initialValue: this.props.statusList.host_manager,
                     rules:[{
                       required: true, message: "~",
                     }]
                   }) }
            />
          </FormItem>
          <FormItem
            label=""
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 14 }}
          >
            <Input
                   {...getFieldProps("manager_dept",{
                     initialValue: this.props.statusList.manager_dept,
                   }) }
            />
          </FormItem>
          <FormItem
            label=""
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 14 }}
          >
            <Input
                   {...getFieldProps("manager_email",{
                     initialValue: this.props.statusList.manager_email,
                     rules:[{
                       type: "email", message: "",
                     },{
                       required: true, message: "~",
                     }]
                   }) }
            />
          </FormItem>
          <FormItem
            label=""
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 14 }}
          >
            <Input
                   {...getFieldProps("manager_phone",{
                     initialValue: this.props.statusList.manager_phone,
                     rules:[{
                       required: true,whitespace: true,message:""
                     },{ validator: this.checkPhone }],
                   }) }
            />
          </FormItem>
          <FormItem
            label=""
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 14 }}
          >
            <Input
                   {...getFieldProps("remark",{
                     initialValue: this.props.statusList.remark,
                   }) }
            />
          </FormItem>

        </Form>

        <div style={{ textAlign: "right" }}>
          <Button onClick={this.handleSubmit.bind(this)} style={{marginRight:"10px"}}   type="primary" htmlType="submit"></Button>
          <Button onClick={this.handleReset.bind(this)}></Button>
        </div>

      </Modal>
    )
  }
}