react彈框

使用掩藏值寫在同一個頁面

使用掩藏變量Visible寫在同一個頁面，內容過多會顯得代碼亂

interface MonitorContentProps extends FormComponentProps { #後端返回值的保存
  topoMonitorModel: StateType;
  record: AppStatusForServiceType;
}

interface MonitorContentState {  #設置值會重新渲染
  sqlVisible:boolean;
}

#按鈕觸發handleSqlVisible方法，設置state的sqlVisible爲true，顯示出隱藏頁
<Button type="primary" onClick={this.handleSqlVisible.bind(this,true)} size="small" className={baseStyles.margin_left_base}>顯示sql</Button>  

const { topoMonitorModel: {detectionSqlBean},} = this.props;
let detectionSql=detectionSqlBean?detectionSqlBean.detectionSql:'無'; 

#顯示的內容
#https://3x.ant.design/components/modal-cn/#header 
<Modal title="顯示sql內容"
       footer={null}
       onCancel={this.handleSqlVisible.bind(this,false)}
       width="60%"
       visible={this.state.sqlVisible}
        >
       <div>{detectionSql}</div>
</Modal>
        
#控制也掩藏的方法，方法定義儘量都用箭頭方法
handleSqlVisible= (flag:boolean) =>{
    const {dispatch} = this.props;
    const {record} = this.props;
    if(flag){
      if(record && record.appInstId){
        dispatch({
          type: 'topoMonitorModel/getDetectionSql',
          payload: {
            appInstId: this.props.record.appInstId,
          },
        })
      }
    }
    this.setState({ #設置state對頁面重新渲染
      sqlVisible: flag
    })
  }

使用組件方式

#表格數據更新，通過按鈕觸發handleUpdateModalVisible方法
    {
      title: '操作',
      render: (text:string, record:TableListItem) => (
        <Fragment>
          <a onClick={() => this.handleUpdateModalVisible(true, record)}>配置</a>
          <Divider type="vertical" />
          <a href="">訂閱警報</a>
        </Fragment>
      ),
    },

#控制也掩藏的方法，方法定義儘量都用箭頭方法
 handleUpdateModalVisible = (flag?: boolean, record?: TableListItem) => {
    this.setState({
      updateModalVisible: !!flag,
      updateFormValues: record || {},
    });
  };

#修改後的保存方法  
  handleUpdate = (fields: TableListItem) => {
    console.log("handleUpdate",fields);
    const { dispatch } = this.props;
    dispatch({
      type: 'tableUserListModel/updateUser',
      payload: {
        ...fields,
      },
      callback: () => {
        let content = "更新用戶成功！";
        message.success(content);
        this.queryUserList(1);
        this.handleUpdateModalVisible();
      },
    });

    // message.success('配置成功');
    // this.handleUpdateModalVisible();
  };  

const updateMethods = {
      handleUpdateModalVisible: this.handleUpdateModalVisible,
      handleUpdate: this.handleUpdate,
    };  
  

#updateFormValues不爲空且updateModalVisible爲true才顯示組件內容
{updateFormValues && Object.keys(updateFormValues).length ? (
          <UpdateForm
            {...updateMethods}
            updateModalVisible={updateModalVisible}
            record={updateFormValues}
          />
        ) : null}

#組件內容
import {Form, Input, Modal} from 'antd';
import React, {Component} from 'react';
import {FormComponentProps} from 'antd/es/form';
import {TableListItem} from '../data';
export interface UpdateFormProps extends FormComponentProps {
  handleUpdateModalVisible: (flag?: boolean, record?: TableListItem) => void;
  handleUpdate: (values: TableListItem) => void;
  updateModalVisible: boolean;
  record: Partial<TableListItem>;
}
const FormItem = Form.Item;
export interface UpdateFormState {
}

class UpdateForm extends Component<UpdateFormProps, UpdateFormState> {
  componentDidMount(): void {
    const {form,record} = this.props;
    console.log("record--->",record);
    form.setFieldsValue({
      name:record.name,
    })
  }

  okHandle = () => {
    const {  form, handleUpdate ,record} = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      fieldsValue.id = record.id;
      handleUpdate(fieldsValue);
    });
  };

  render() {
    const { updateModalVisible, handleUpdateModalVisible,form } = this.props;
    return (
      <Modal
        width={640}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title="修改用戶"
        visible={updateModalVisible}
        onOk={this.okHandle}
        onCancel={() => handleUpdateModalVisible()}
      >
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="用戶名">
          {form.getFieldDecorator('name', {
            rules: [{ required: true, message: '請輸入至少五個字符！', min: 5 }],
          })(<Input placeholder="請輸入用戶名" />)}
        </FormItem>
      </Modal>
    );
  }
}
export default Form.create<UpdateFormProps>()(UpdateForm);