Ant design pro-项目探究（5）react基础知识解决页面数据处理-CFANZ编程社区

Ant design pro-项目探究（5）react基础知识

前言，前端利用请求参数、界面与数据进行整合，构成前端的展示。对于状态的一些调用，react中拥有useState,useEffect,useRef方式来实现前端状态的利用，了解这些方式的运用，对开发界面化来说提供了非常大的便捷之处，以下以以项目自带的table-list来讲解。

首先我们来看看useState

import React, { useState} from 'react';
const TableList = () => {
/** 新建窗口的弹窗 */
  const [createModalVisible, handleModalVisible] = useState(false);
  return (
	 <ProTable
	 	// 头部添加按钮，利用点击事件调用handleModalVisible改变createModalVisible的状态
		toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              handleModalVisible(true);
            }}
          >
            <PlusOutlined /> 新建
          </Button>,
        ]}
		>
		 <ModalForm 
		 	// createModalVisible状态
		    visible={createModalVisible}
		    // 可视化弹窗的状态改变也绑定handleModalVisible
	        onVisibleChange={handleModalVisible}
		  ></ModalForm>
	</ProTable>
)
}

利用useState可以绑定状态达到一些数据的使用效果。往往状态的改变会联动其他事件和数据的变化，这时可以利用useEffect来绑定createModalVisible的变化。

import React, { useState,useEffect} from 'react';
const TableList = () => {
/** 新建窗口的弹窗 */
  const [createModalVisible, handleModalVisible] = 
useState(false);

// 运用useEffect
  useEffect(()=>{
	console.log("画面第一次渲染执行,并绑定createModalVisible的状态，状态改变后，会允许这里的输出")
},[createModalVisible])
  return (
	 <ProTable
	 	// 头部添加按钮，利用点击事件调用handleModalVisible改变createModalVisible的状态
		toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              handleModalVisible(true);
            }}
          >
            <PlusOutlined /> 新建
          </Button>,
        ]}
		>
		 <ModalForm 
		 	// createModalVisible状态
		    visible={createModalVisible}
		    // 可视化弹窗的状态改变也绑定handleModalVisible
	        onVisibleChange={handleModalVisible}
		  ></ModalForm>
	</ProTable>
)
}

这样useEffect也利用起来了，我们在操作表格数据的时候，难免在进行操作时要对当前表格数据进行刷新，这时useRef()钩子函数便起到了作用。

import React, { useState,useEffect,useRef} from 'react';
// 添加函数，模拟添加请求
const handleAdd = async (fields) => {
  const hide = message.loading('正在添加');

  try {
    await addRule({ ...fields });
    hide();
    message.success('添加成功');
    return true;
  } catch (error) {
    hide();
    message.error('添加失败请重试！');
    return false;
  }
};
const TableList = () => {
/** 新建窗口的弹窗 */
  const [createModalVisible, handleModalVisible] = useState(false);
  const actionRef = useRef();
  useEffect(()=>{
	console.log("画面第一次渲染执行,并绑定createModalVisible的状态，状态改变后，会允许这里的输出")
},[createModalVisible])
  return (
	 <ProTable
	 	// 这里添加引用后，可在当前使用actionRef来对表格数据做函数处理
	 	 actionRef={actionRef}
	 	// 头部添加按钮，利用点击事件调用handleModalVisible改变createModalVisible的状态
		toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              handleModalVisible(true);
            }}
          >
            <PlusOutlined /> 新建
          </Button>,
        ]}
		>
		 <ModalForm 
		 	// createModalVisible状态
		    visible={createModalVisible}
		    // 可视化弹窗的状态改变也绑定handleModalVisible
	        onVisibleChange={handleModalVisible}
	        // 表格提交完成后的事件
	        onFinish={async (value) => {
          	const success = await handleAdd(value);
          	if (success) {
            handleModalVisible(false);
            // 调用表格数据钩子
            if (actionRef.current) {
            // 重新刷新表格数据
              actionRef.current.reload();
            }
          }
        }}
		  ></ModalForm>
	</ProTable>
)
}