react業務開發筆記1

1. 自定義table空數據

import {   ConfigProvider, Table,   } from 'antd'
// 定義空數據展示
  const renderEmpty = () => (
    <Empty
      imageStyle={{
        height: 60
      }}
      description={<span>description </span>}>
      <Button type="primary" > this is btn</Button>
    </Empty>
  )

return(
      <ConfigProvider renderEmpty={() => renderEmpty()}>
        <Table
        />
      </ConfigProvider>
)

2. 動態添加操作項

  // 操作按鈕
  const actionBtn = {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    fixed: tableType === 'provinices' ? false : 'right',
    align: 'center',
    width: 160,
    render: (_, record) => {
      return (
        <Space>
          <Button type="link" onClick={() => tableRecordHandle(record, 'publish')}>
            發佈
          </Button>
          {record.release_status === '已發佈' && (
            <Button danger type="link" onClick={() => tableRecordHandle(record, 'remark')}>
              撤回
            </Button>
          )}
        </Space>
      )
    }
  }

3. 基於usestate可以定義對象作爲初始值原理使用一個usestate定義模塊數據

import {  useState } from 'react'
import {  Table,   } from 'antd'
  // 表格數據
  const [tableStatus, setTableStatus] = useState({
    columns: [],
    dataSource: [],
    loading: false
  })
setTableStatus(oth=>({...oth,loading:true}))
ajax.then(res=>{
setTableStatus(oth=>({...oth,loading:false}))
  // 重命名返回數據
  const {header:columns, data:dataSource } = res
  setTableStatus(oth=>({...oth,columns,dataSource  }))
)
// 內部項與Table需要接收的參數相同，因而可以直接用展開運算符
return  < Table   {...tableStatus}  />

4. input鍵入搜索

        <Input
          placeholder="按enter可直接搜索"
          autoFocus
          onKeyUp={e => enterSearch(e)}
          allowClear
          onChange={e => setKeyword(e.target.value.trim())}
          value={keyword}     
        />

const [keyword, setKeyword] = useState('')
const enterSearch = ({ keyCode }) => {
    // enter鍵的keyCode是13
    if (keyCode === 13) {
      getPageTableResource()
    }
}

5. 父組件調用子組件方法(類似vue使用ref調用子組件方法 )

子組件：

import  { forwardRef, useImperativeHandle } from 'react'
const MyTable = (props, parentRef) => {
// 這裏寫父組件可以調用的方法
  useImperativeHandle(parentRef, () => ({
    clearSelected: () => {
      onSelectChange([], [])
    }
  }))
}
export default forwardRef(MyTable)

父組件：

import {  useRef } from 'react'
import {MyTable    } from './components'
function Enroll() {
  const childRef = useRef(null)

  // dosomething...
  // 父組件調用子組件暴露給父組件的函數
   myTableRef.current.clearSelected()

  return <MyTable ref={childRef } />
}

6. 關於radio單選防抖(需求：選中即發請求)

import { useState, useCallback, useRef } from 'react'
import { Radio} from 'antd'
import { debounce } from 'lodash'
function MyComp(){
  const [tab, setTab] = useState('1')
    // 防抖單選 useCallback防止失效，debounce防止多次點擊
  const radioChange = useCallback(
    debounce(value => {
      setTab(value)
    }, 500),
    []
  )
   return ( <Radio.Group  value={tab}   onChange={e => {   radioChange(e.target.value)  }}  buttonStyle="solid">
            <Radio.Button value="1">show1</Radio.Button>
            <Radio.Button value="2">show2</Radio.Button>
        </Radio.Group>
  )
}

7. 表單多個子元素(默認只允許一個子元素，否則 ：表單驗證失效)

import { Input, Form  } from 'antd'
const { Item, useForm } = Form
const { TextArea } = Input
export default function Myform(props) {
    const [form] = useForm()
    return ( <Form name="validate_other" {...formItemLayout} form={form} preserve={false}>
      <Item name="myItemInstance" label="展示內容"> 
        <div>這是一些別的內容</div>
         <Form.Item style={{ marginBottom: '24px' }} name="myItemInstance">
            {/* 這是此子表單項要校驗的項  */}
                <TextArea rows={4} placeholder="請輸入備註（限制2000字以內)" maxLength={2000} />
        <Form.Item >
      </Item>
  </Form>)
}

8. 表單內實現多選框全選按鈕(支持表單驗證)

全選按鈕有三種狀態：全選態，半選態，不選態。

全選態：選中項等於所有項
不選態：沒有選中項
半選態：有選中項且選中項不等於所有項

import { useEffect, useState } from 'react'

function Myfil(){
// 全選
 const [isAllChecked, setIsAllChecked] = useState(false)
// 半選
  const [isIndeterminate, setIsIndeterminate] = useState(false)
// 全選按鈕被change時
  const checkAllChange = e => {
    const checked = e.target.checked
    // 當全選框被觸發時，首先移除半選態
    setIsIndeterminate(false)
    // 爲true, 將表單內該表單項全賦值
    if (checked) {
      setIsAllChecked(true)
      setTimeout(() => {
        form.setFieldsValue({
          myItemInstance: list.map(v => v.code)
        })
      }, 100)
    } else {
    // 否則：全不賦
      setIsYearAllChecked(false)
      setTimeout(() => {
        form.setFieldsValue({
          myItemInstance: []
        })
      }, 100)
    }
  }
return (
  <Item
    rules={[
      {
        required: true,
        message: '此爲必選項！'
      }
    ]}
    label="此爲label"
    name="myItemInstance"
  >
    <div>
      <Checkbox
        style={{ marginTop: '6px' }}
        checked={isAllChecked}
        indeterminate={isIndeterminat}
        onChange={e => {
         checkAllChange(e)
        }}>
        全選
      </Checkbox>
    </div>
    <Form.Item name="myItemInstance">
      <Checkbox.Group style={{ marginBottom: '6px' }}>
        {Array.isArray(list) &&
          list.length > 0 &&
          list.map(item => {
            const { code } = item
            return (
              <Checkbox
                key={code}
                onChange={e => {
                  setTimeout(() => {
                    const { formYears } = form.getFieldsValue()
                    setIsAllChecked(formYears.length !== 0 && formYears.length === list.length)
                    setIsIndeterminate(formYears.length !== 0 && formYears.length !== list.length)
                  }, 0)
                }}
                value={code}>
                {code}項
              </Checkbox>
            )
          })}
      </Checkbox.Group>
    </Form.Item>
  </Item>


)

}

以上。