实现些简单的deomo

显示时间

自定义hooks
使用定时器、生命周期、通过状态渲染更新

// hooks 文件
import { useEffect, useState } from 'react'function getDate() {let date = new Date();let year = date.getFullYear()let hour = date.getHours();let minutes = date.getMinutes();let second = date.getSeconds();let time = `${year ?? '2024'}-${hour}:${minutes}:${second}` as string;return time;
}export function UseGetTime() {const [time, setTime] = useState<string>('');useEffect(() => {setTime(getDate())return () => {clearInterval(timerId);}}, [time]);let timerId = setInterval(() => {setTime(getDate());}, 1000);return { getTime: time };
};

// time 文件
import React from 'react'import { UseGetTime } from '../hooks/time'const Time: React.FC = () => {const { getTime } = UseGetTime();return (<>{getTime}</>)
}export default Time;

表单提交

import React from "react";
import { Form, Input, Button } from 'antd'const FormDemo: React.FC = () => {const [form] = Form.useForm();const userName = Form.useWatch('username', form);const onClick = () => {console.log('提交内容', userName)}return (<Form form={form}><Form.Item name={'username'}><Input style={{ width: 160 }} placeholder={'请输入录入项'}></Input></Form.Item><Form.Item><Button onClick={onClick} type="primary">提交</Button></Form.Item></Form>)
};export default FormDemo;

表单受控组件与非受控组件

受控组件

概念：由state状态值，交给react渲染机制控值，属于受控组件
机制：state存值，用户输入 =》onChange触发 =》set值 =》引起状态改变react重新渲染
注意：这边用Form和Form.item包裹并没有什么作用，因表单项无设定name值，无法获得表单值 ，但若设定name值反而导致受控组件失效交于form表单控制

import React, { InputHTMLAttributes, useCallback, useState } from "react";
import { Form, Input, Button, Select } from 'antd'const FormDemo: React.FC = () => {type ValueType = InputHTMLAttributes<HTMLInputElement>['value'] | bigint;const [value, setValue] = useState<ValueType | string>();const [form] = Form.useForm();const onClick = () => {console.log('提交内容', value)}const onChange = (_: string, event: Record<string, any>) => {setValue(event.label);}const onchangeIn = (event: any) => {setValue(event.target.value);};return (<Form form={form}><Form.Item ><Select showSearch placeholder="请选择" onChange={onChange} options={[{value: '01',label: '男'},{value: '02',label: '女'}]}></Select></Form.Item><Form.Item><Input value={value} style={{ width: 160 }} onChange={onchangeIn} placeholder={'请输入录入项'}></Input></Form.Item><Form.Item><Button onClick={onClick} type="primary">提交</Button></Form.Item></Form>)
};export default FormDemo;

非受控组件

概念：通过default设置默认值，由用户输入，通过dom来操作值，并不依赖react，属于非受控组件
机制：用户输入=》更新值
注意： 此时给表单项设置name值，交予表单控值，再给表单项设置value是无效的

import React, { InputHTMLAttributes, useCallback, useState } from "react";
import { Form, Input, Button, Select } from 'antd'const FormDemo: React.FC = () => {const [form] = Form.useForm();const userName = Form.useWatch('username', form);const getFormValues = form.getFieldsValue();console.log('userName', userName);console.log('getFormValues', getFormValues);const onClick = () => {console.log('提交内容', userName)}const onChange = (_: string, event: Record<string, any>) => {// 赋值}const onchangeIn = (event: any) => {// 赋值};return (<Form form={form}><Form.Item name="category"><Select showSearch placeholder="请选择" onChange={onChange} options={[{value: '01',label: '男'},{value: '02',label: '女'}]}></Select></Form.Item><Form.Item name="username"><Input defaultValue={'男'} style={{ width: 160 }} onChange={onchangeIn} placeholder={'请输入录入项'}></Input></Form.Item><Form.Item><Button onClick={onClick} type="primary">提交</Button></Form.Item></Form>)
};export default FormDemo;