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

clipboard.png

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>
    )
  }
}
Mar.20,2021

re-request list


refresh is not automatic, it's all manual, so it needs to be implemented in code.

what is the logic of manual refresh? Re-request the list interface.

how do I request a list interface? It must be a function ~

so, now that the logic is clear, close the modal box, request the list interface, and refresh.

string this logic together in code. It's very simple. Give it a try.


clipboard.png
->

clipboard.png


after clicking Save call to add the interface, determine whether the calling parent component query interface is refreshed


modify the state line

, as long as the state is changed, it will trigger render

.
Menu