antd 弹出框

1、调用一个接口

controlStatus(id)

  controlStatus = (id) => {
    this.setState({
      rowid:id,
      visibleForm: !this.state.visibleForm,
      loading: true
    },
    () => {
      this.props.dispatch({
        type: "propertyevaluate/getTemplateInfo",
        payload: { id: id },
        success: (data) => {
          if(data.code===200){
            let {templateDetails}= data.content;
            this.setState({ loading: false,templateDetails});
          }else{
            this.setState({ loading: false});
          }
        }
      })
    });
  };

2、弹出框显示visibleForm取反（state里设置false）

{this.state.visibleForm&&<Modal
          title={"状态控制表"}
          visible={this.state.visibleForm}
          onOk={this.openStatus}
          onCancel={this.toggleForm}
        >
          <Form {...formItemLayout}>            
            <Row gutter={20}>
              <Col className="gutter-row" span={18}>
                  <FormItem  label="模板名称" >
                    {getFieldDecorator("name", {
                      initialValue:templateInfo.name?templateInfo.name:null
                    })(
                      <Input readOnly />
                    )}
                  </FormItem>
              </Col>
              <Col className="gutter-row" span={18}>
                <FormItem label="评价名称" >
                  {getFieldDecorator("reviewName", {
                    initialValue:templateInfo.reviewName?templateInfo.reviewName:null
                  })(
                    <Input />
                  )}
                </FormItem>
              </Col>
              <Col className="gutter-row" span={18}>
              <FormItem label="状态" >
                {getFieldDecorator("status", {
                  rules: [{ required: true, message: "请选择启用状态" }],
                  initialValue:templateInfo.status
                })(
                  <RadioGroup>
                    <Radio value={1}>启用</Radio>
                    <Radio value={0}>停用</Radio>
                  </RadioGroup>
                )}
              </FormItem> 
            </Col>
            <Col className="gutter-row" span={18}>
              <FormItem label="开始时间" >
              {getFieldDecorator("beginTime", {
                rules: [{ required: true, message: "请选择开始时间" }],
                  initialValue:templateInfo.beginTime?moment(templateInfo.beginTime):null
                })(
                  <DatePicker
                    disabledDate={this.disabledStartDate}
                    showTime={{ format: 'HH:mm' ,minuteStep:60,defaultValue: moment('08:00', 'HH:00')}}
                    format="YYYY-MM-DD HH:mm"
                    placeholder="开始时间"
                    onChange={this.onStartChange}
                  /> 
                )}
              </FormItem>
              <FormItem label="结束时间" >
              {getFieldDecorator("endTime", {
                rules: [{ required: true, message: "请选择结束时间" }],
                  initialValue:templateInfo.endTime?moment(templateInfo.endTime):null
                })(
                  <DatePicker
                  disabledDate={this.disabledEndDate}
                  showTime={{ format: 'HH:mm' ,minuteStep:60,defaultValue: moment('08:00', 'HH:00')}}
                  format="YYYY-MM-DD HH:mm"
                  placeholder="结束时间"
                  onChange={this.onEndChange}
                />
                
                )}
              </FormItem>
            </Col>
            </Row>
          </Form>
        </Modal>}

在1之前加上这段，及时清理原来弹框里的信息

// 状态清除
  toggleForm = (id=null) => {
    // 模态框打开或者 关闭都清除原有的信息
    this.setState({    
      rowid:id,
      visibleForm: !this.state.visibleForm
    });
  };