react+antd 学年组件封装

SchoolYear.tsx

/*
  学年组件：
    1、使用时传入onChange事件，形如：
    2、默认为选中当前学年，如要不需要，设置 isSelected={false}
*/
import React, { useState, useEffect } from 'react'
import { Select } from 'antd'
import { useFetchState } from '@/utils/hooks'

import { getSchoolYearOptions } from '@/services/select'

interface OptionType {
  id: number
  name: string
}

interface SchoolYearProps {
  onChange?: (value: any) => void
  isSelected?: boolean
  isAllowClear?: boolean // 如果要支持清除，就传入 isAllowClear
  options?: Array // 如果传入了学年options，组件内就不请求数据了
}

const SchoolYear: React.FC = (Props: any) => {
  const { onChange, isSelected = true, isAllowClear = false, options = [] } = Props
  const [yearOption, setYearOption] = useFetchState([]) // 学年选项list
  const [initYear, setInitYear] = useState() // 默认选中学年

  // 格式化接口数据，用于下拉框回显
  const format = (options: any[]) =>
    options.map(({ name, id }: OptionType) => ({
      label: `${name}学年`,
      value: id
    }))

  const set = (options: any) => {
    setYearOption(format(options))
    if (isSelected) {
      const year = options.find((item: any) => item.isCheck).id
      setInitYear(year)
      onChange(year)
    }
  }

  // 获取学年options
  const fetchYearOptions = async () => {
    if (options.length) {
      // console.log(options, format(options))
      set(options)
    } else {
      try {
        const { success, data, msg } = await getSchoolYearOptions()
        if (success && data) {
          set(data)
          return data
        }
        throw new Error(msg)
      } catch (err) {
        return false
      }
    }
  }

  useEffect(() => {
    fetchYearOptions()
  }, [])

  return (
    <Select
      onChange={onChange}
      allowClear={isAllowClear}
      placeholder="请选择学年"
      showSearch
      options={yearOption}
      defaultValue={initYear}
      key={initYear}
    />
  )
}

export default SchoolYear



学年组件要求默认选中当前学年，处理起来分异步和同步两种情况。



使用：


　　第一种情况：学年组件被异步加载


　　　　columns：



    {
      title: '所属学年',
      dataIndex: 'projectYear',
      key: 'projectYear',
      renderFormItem: () => 
    }




　　　　效果：




　　第二种情况：同步加载学年组件



            <Form.Item label="学年" name="projectYear" >
              <SchoolYear onChange={onChangeYear} />
            Form.Item>



　　　　这种情况则仅适用change事件将当前学年传递到父组件中即可



　　　　效果：





注意：


　　1、注意异步的数据，传递到组件时的先后顺序。如果学年组件是被异步渲染的，那么就需要在父组件中获取当前学年，同时可以将options传递到子组件，减少子组件中重复的请求


　　2、通过change事件将当前学年绑定到父组件中

						  
					  
						
							


						

							
							
			reactant-design							
						



						

						
						


						

						
					
					

					
					

						
相关

						

				
						
			

																
								

										
react dom移动算法

									
									

								 

        

								

							
							

																
								

										
React组件重构：嵌套+继承 与 高阶组件

									
									

								 

        

								

							
							

																
								

										
React中嵌套组件与被嵌套组件的通信

									
									

								 

        

								

							
							

																
								

										
AntDesign(React)学习-15 组件定义、connect、interface

									
									

								 

        

								

							
							

																
								

										
初学ReactJS，写了一个RadioButtonList组件

									
									

								 

        

								

							
							

																
								

										
快速搭建react项目骨架（按需加载、redux、axios、项目级目录等等）

									
									

								 

        

								

							
							

																
								

										
react传值名称使用value可能出现死循环

									
									

								 

        

								

							
							

																
								

										
React Native bind函数

									
									

								 

        

								

							
							

																
								

										
React Native constructor方法内外this的区别

									
									

								 

        

								

							
							

																
								

										
使用 create-react-app 创建基于 ts 项目

									
									

								 

        

								

							
							

																
								

										
react源码解析17.context

									
									

								 

        

								

							
							

																
								

										
react源码解析14.手写hooks

									
									

								 

        

								

							
							
            
            
            
                                    
           
  			
						

					

					
				

				

														
					
					

					
									

					
									   
标签

										

										
    
										

									

										
										

									

					

					
				


			
		
		
		
			


						





	

	
一品网 冀ICP备14022925号-6