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