react Hooks 整理（未完）

初始化变量：const [totalPage, settotalPage] = useState(0);//useState定义类型
赋值：settotalPage(1)

const [tableData, settableData] = useState<Array<marketingTableData>>([
    {
      goodsName: '',
      page: '1',
      limit: '10',
      exchangeStatus:'2',
      exchangeType:'2',
    },
  ]);
  export type marketingTableData = {
  goodsName: string;
  page: string;
  limit: string;
  exchangeStatus:string;
  exchangeType: string;
};
marketingTableData 为定义变量的类型格式；

useEffect(() => {
    getPageList(pageData).then((res) => {
      if (res.status === 200) {
        settableData(res.data.rows);
        settotalPage(res.data.total);
      }
    });
  }, [pageData]);
  useEffect为页面初始化执行，[pageData]监听pageData的值，只有改变就会重新执行useEffect

const handleChanges = (value: string) => {}；
定义方法，value: string形参后面加参数类型，any为任意类型；

import { history } from 'umi';
history.push({
  pathname: '/customer/integral_store/AddIntegralGoods',
  query: {
       id: text.id,
       type: 'edit',
   },
});
history.push({
  pathname: '/customer/integral_store/AddIntegralGoods',
});
引入umi中的方法，history.push跳转页面，query加跳转参数；

//Form表单提交和回显
//通过form={form}绑定form，onFinish为提交方法，回显通过form.setFieldsValue({参数名：参数值})
 const [form] = Form.useForm();
 <Form name="growUp-period" form={form} onFinish={onFinish}>
   <Form.Item
     label="积分费率"
     name="integralRate"
     rules={[{ required: true, message: '请输入积分费率!' }]}
   >
     <Input placeholder="请输入" />
   </Form.Item>
   <p className={styles.integralRateHint}>例如：0.05代表100积分=5块钱</p>
 </Form>
 form.setFieldsValue({ integralRate:res.data.rate });

//日期选择器禁止选择现在之前的日期
<RangePicker
    style={{ width: '250px' }}
    allowClear={false}
    disabledDate={(current) => {
    	return current && current < moment().endOf('day').subtract(1, 'days');
    }}
    disabled={indateType !== '1' || history.location.query?.type === 'select'}
/>

//rules自定义效验  ==》  rules={[{ validator: validatorImg }]}
<Form.Item
	name="mapUrl"
	label="手绘图"
	style={{ marginLeft: '28px' }}
	colon={false}
	rules={[{ validator: validatorImg }]}
>
   <UploadImage
      service={service}
      maxCount={1}
      isCover
      fileList={fileList}
      onConfirm={onConfirmImg}
      size={10}
    ></UploadImage>
</Form.Item>
//rules自定义效验
const validatorImg = (rule: any, val: any, callback: any) => {
  if (!fileList.length) {
    callback('请选择图片');
  }
  callback();
};

//Modal表单提交okButtonProps中form和Form的name名一致
<Modal
  title="添加奖品"
  visible={isModalVisible}
  onCancel={handleCancel}
  width={900}
  okButtonProps={{ htmlType: 'submit', form: 'addPrize' }}
>
<Form
  colon={false}
  form={form}
  name="addPrize"
  onFinish={onFinish}
  className={styles.ant_advanced_search_form}
>

//js排序两种方法
  const handleMoveMove = (type:any, i: number) => {
    // let arr:any = [...rulesList]
    let arr = JSON.parse(JSON.stringify(rulesList));
    let obj: any = JSON.parse(JSON.stringify(arr[i]));
    if(type=='0'){
      arr.splice(i, 1);
      arr.splice(i + 1, 0, obj);
    }else{
      [arr[i - 1], arr[i]] = [arr[i], arr[i - 1]];
    }
    console.log('arr---',arr)
    setRulesList(arr);
  };

//单独控制table某个表头隐显，通过hidden属性
const [tabShow,settabShow] = useState(true);
const columns = [
	{
      title: '适用范围',
      dataIndex: 'leaseType',
      key: 'leaseType',
      width: 130,
      hidden: tabShow,
      render: (text: string) => {
        return text === '1' ? '长租房预订' : text === '2' ? '短租房预订' : '';
      },
    },
  ].filter((item) => !item.hidden);;