React+ts学习文档

1.项目中遇到的困难解决以及方案

1.顶部的查询按钮

点击查询如果在该组件去进行axios请求，这样再该组件下获得返回的列表还需要传回父组件，父组件再把列表发给下面的table组件，不太方便。

解决方案：将用户的选择项传给顶级组件index.tsx，再在顶级组件根据筛选项去进行请求，这样只需要父组件把列表发给下面的table组件渲染即可。 

2.查询按钮和index不在一个页面

查询按钮是index的子组件，但是请求是放在index里面去请求的（也是为了方便分发给下面的子组件），但是点击按钮才去进行请求，可是顶级组件如何知道是否点击按钮？

解决方案：设置一个全局redux值:inquireState，点击按钮就将该值从false变成true，或者从true变成false。一旦这个值发生改变，在顶级组件的useEffect就去执行请求

useEffect(()=>{
        console.log('查询');
        getFilteredTableData()
    },[inquireState])
 
 
// 点击查询按钮,按照条件进行查询
    function getFilteredTableData() {
        const p4 = axios.post('/api/project/project', {
            action: "getProjectInfoSearch",
            filterList: topFilterFieldValue
        }).then(
            response => {
                console.log(response.data.retlist);
                // setTableList(response.data.retlist)
                return response.data.retlist
            },
            error => {
                message.error('产线列表请求失败，请刷新重试！');
                return []
            })
    }

3.进入页面的首次请求

进入页面时首次加载需要用useEffect，这边需要注意useEffect的第二个参数，不然会导致一旦状态更新，组件将重新呈现，这将再次触发useEffect。可能导致一直执行里面的函数。

4.Modal弹出框的确认按钮

弹出框的确认按钮是作为footer的，无法拿到Modal内部表单的填写项 

解决方案：

 const onFinish =  async () => {
    const values = await form.validateFields();
    //values
    console.log("values", values);
  };

记得在表单的参数值添加：

 <Form
                        name="dynamic_form_nest_item"
                        onFinish={onFinish}
                        autoComplete="on"
                        //绑定form
                        form={form}
                    >

还有：需要通过 Form.useForm 对表单数据域进行交互

const [form] = Form.useForm()

jantd.pro中使用Modal嵌套Form实现表单的验证及表单项的值获取_逆风飞翔的猿的博客-CSDN博客antd.pro是时下很流行的React集成工具，其中包含了，react的核心代码，react路由管理，react的状态管理(dva)，以及umi等适应快速开发的一套完整框架解决方案。最近接触到antd.pro，使用到Form表单的验证问题。在前端开发中必不可少的会碰到添加和修改功能。简单的添加/修改功能会在列表页list页面中定义一个Modal，或者以组件的方式创建一个CreateForm，然后在主页面引用。不管哪种方式只要是以Modal的形式展示，那就会牵扯到需要在Modal中嵌入Form表单。https://blog.csdn.net/chenqk_123/article/details/107781437

5. Modal宽高设置

Modal直接设置宽高不是很合适，因为一个页面中可能有多个Modal。但是他们的宽高不一定一致，需要一个个去设置不同的宽和高，而且我试了一下样式不生效，只有在app.less设置全局样式，仍旧没有解决设置不同的宽和高的问题

解决方案：Modal不要直接用样式去设置宽高，在Modal内部有个参数：width可以设置宽度，高度会按照内容自动撑开，如果下面需要留白，可以给一个透明div：

marginTop: '10px',color:'#fff',opacity:'0' }}>提示：

6.AntD给表头设置tooltip

{
    // tooltip描述
     title: 
    <div>有效任务 
        <Tooltip placement='top' title='有效任务量，即剔除了异常或删除状态的任务后，调研项目中有效任务的总量'>
            <InfoCircleOutlined />
        Tooltip>
    div>,
    dataIndex: 'task_count_eff',
    key: 'task_count_eff',
    
  },
  {
    title: '已分配量',
    dataIndex: 'task_count_end',
    key: 'task_count_end',
  },

参考： 

(5条消息) AntD的Table表头title加Icon图标和气泡提示Tooltip_莉兹Liz的博客-CSDN博客_antd table title

7.AntD为Form的List设置默认值 

form.list实现动态增减表单项，但是没有默认显示一组或者多组数据

解决方案：AntD为Form的List设置默认值 - 简书 (jianshu.com)

2.有用的资料

react-cli | 琥珀丶川

useEffect详解_IT-CLASS的博客-CSDN博客_useeffect

react hooks组件间的传值方式(使用ts)_一笑奈何@的博客-CSDN博客_hooks传值

React Hooks 初学者指南