充满荆棘的React之路

useEffect、useState使用

在React中使用useEffect和useState。useeffect的用法是指定一个副效应函数，组件每渲染一次，该函数就自动执行一次。组件首次在网页 DOM 加载后，副效应函数也会执行。useState是react自带的一个hook函数，它的作用是用来声明状态变量。

import React, { useState, useEffect } from "react";

const Test= () => {
	const [tabList, setTabList] = useState([]);
	const [userId, setUserId] = useState();
	
 	const eventList = () => {
	    const params = {
		    id: "10025636"
		    pageNum: 1,
		    pageSize: 20
	    }
	    apis.eventList({
	    	...params
	    }).then(res => {
	        if (res.data?.length > 0) {
		       setTabList(res.data)
	        } else {
	           setTabList([])
	        }
	    })
  	}
    useEffect(() => { eventList(); }, [userId]) // userId，重新执行函数的依赖。
}
export default Test;

Form表单中重置方法form.resetFields();

这里我使用antd框架中4版本的form表单。引入form组件，从Form.useForm()中解析form出来，再表单上绑定form={form}才可以使用表单的重置方法。点击提交以后，如果有值，会把之前输入的值都重置掉。

import { Form } from 'antd4';

const FormItem = Form.Item;

// 表单的提交方法
const onFinish = (value) => {
	if(value){
		form.resetFields();
	}
}

const Test = () => {
    const [form] = Form.useForm();
    <Form name="gateway"
    	form={form}
      	onFinish={onFinish}>
      	 ...
      	 <FormItem>
            <Button type="primary" htmlType="submit">确定</Button>
            <Button type="">取消</Button>
         </FormItem>
    </Form>
}
export default Test;

兄弟组件间的传值

使用事件总线events的方法进行组件间的通讯。在项目中安装events，然后进行配置即可。
1、安装events依赖

npm install events    //通过npm安装

2、在根目录下创建一个utils.js文件并引入events。自定义使用名字为eventBus然后导出，在需要使用的地方引入即可。

import { EventEmitter } from 'events';
const eventBus = new EventEmitter();
export default eventBus;

3、使用案例，在需要使用的地方引入，然后使用eventBus.emit()方法传值。eventBus是我们自定义的名字。powerUserNos是我们传递时候定义的名字，后面用这个变量使用所传的值。

// 传值组件（父组件）
import eventBus from '../utils'; // 引入我们定义好的eventBus
eventBus.emit('powerUserNos', res.data); // 属性名：powerUserNos，要传递的值res.data

4、在子组件使用

// 接收组件（子组件）
const Test= () => {
  const [powerUserNos, setPowerUserNos] = useState('');
  useEffect(() => {
    const getPowerUserNos = (value) => {
      setPowerUserNos(value)
    }
    eventBus.on('powerUserNos', getPowerUserNos); // 对发出的事件进行监听
    return () => {
      // 记得不使用此组件的时候要关闭监听，避免再次进入的时候再次创建一个监听事件，如果如此往复多次，就会创建很多监听事件，这将一发不可以收拾。
      eventBus.removeListener('powerUserNos', getPowerUserNos)
    }
  }, [])
}
export default Test

以上演示的都是同步调用的方法，异步调用的时候需要使用nvoke方法,我目前没用到。用到的时候更新，异步的方法猜测如此，等待实践~

events.invoke('powerUserNos').then(res => {
 	setTxt(res)
});

自定义antd框架中Modal、Form的样式

自定义样式的时候使用:global标识，注意一个很坑的细节，如果是弹框里面的样式自定义，一定要先在modal上定义好wrapClassName属性，这里主要属性名后面直接跟名字，不要加 {style.classNmae}。

<Modal
    title={active === 0 ? '参与' : '调整'}
    visible={confirmVisible}
    onCancel={() => {
      setConfirmVisible(false);
    }}
    footer={null}
    wrapClassName='ddPlanNode-content-modal' // 定义好class类名，然后在global中用这个识别才能正确更改样式。
  >
    <div className={style.canyubox}>
      <Form name="sure"
        form={form}
        onFinish={onFinish}>
        ...

:global {
  #sure {
    padding: auto 40px !important;

    .canyuboxtext {
      text-align: center;
      width: 100%;
    }

    .antd4-form-item-control {
      input {
        width: 150px;
      }
    }
  }
}