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
    });
  };