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