随笔分类 -  Ant Design

单击事件<->长按时间：手搓播放器
摘要：事件分析 事件区分核心：使用onMouseDown、onMouseUp和定时器来区分单击事件与长按事件 按下时设置长按事件定时器（并加入长按回调），并记录当前时间戳， 松开事件中如果当前时间戳差值小于定时器则执行单击回调，并清除定时器，如果大于定时器事件，则按下事件中定时器的长按回调已经执行，事件末 阅读全文
posted @ 2025-03-04 17:08 SimoonJia 阅读(52) 评论(0) 推荐(0)
js获取文本框光标位置、操作光标setSelectionRange，selectionStart，selectionEnd
摘要：关键点： 获取antd组件包裹的原生textArea实例：const textarea = expressInputRef.current.resizableTextArea.textArea; 获取光标位置：const { selectionStart, selectionEnd } =texta 阅读全文
posted @ 2025-02-12 10:46 SimoonJia 阅读(429) 评论(0) 推荐(0)
antd下拉框Select增加模糊搜索filterOption
摘要：filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} 阅读全文
posted @ 2024-12-05 18:43 SimoonJia 阅读(195) 评论(0) 推荐(0)
form4表单验证书写方式
摘要：1.直接在表单项书写： rules={[ { required: true, message: '请选择指标类型', }, { validator: (_, value) => { const num = form.getFieldValue('itemList')[field.name]['fil 阅读全文
posted @ 2024-12-05 17:36 SimoonJia 阅读(55) 评论(0) 推荐(0)
Form.List触发list项单独验证，List重置表单值
摘要：alertConfig:Form.List的name name：子项中filed的name属性 alarmType：子项内的某一表单项name form.validateFields([['alertConfig', name, 'alarmType']]) 单个List重置表单值： form.re 阅读全文
posted @ 2024-11-22 14:13 SimoonJia 阅读(85) 评论(0) 推荐(0)
antd表格布局labelCol、wrapperCol
摘要：行宽为24，可以使用Row和Col来改变布局 const formItemLayout = { labelCol: { span: 3 }, // 控制 label 宽度 wrapperCol: { span: 8 }, // 控制 input 宽度 }; <Form labelAlign="lef 阅读全文
posted @ 2024-09-02 11:53 SimoonJia 阅读(523) 评论(0) 推荐(0)
Tree树组件格式化数据、获取所有数据数组
摘要：格式化树数据： function replaceNameWithTitle(data) { // 遍历数据数组 return data.map(item => { // 复制当前对象，以免修改原始数据 const newItem = { ...item }; // 将 name 属性替换为 titl 阅读全文
posted @ 2024-05-14 16:50 SimoonJia 阅读(77) 评论(0) 推荐(0)
简单的自定义表单控件
摘要：核心为onChang事件，赋值需要关注value <Form.Item name='position' label="位置" style={itemStyle} > <InputXYZ /> </Form.Item > const InputXYZ = (props) => { const { id 阅读全文
posted @ 2024-05-13 19:02 SimoonJia 阅读(23) 评论(0) 推荐(0)
antd下拉选择框搜索配置：filterOption
摘要：<Select allowClear mode="multiple" showArrow={true} showSearch={true} filterOption={(inputValue, option) => option?.props?.label.includes(inputValue)} 阅读全文
posted @ 2024-05-07 18:15 SimoonJia 阅读(125) 评论(0) 推荐(0)
antd表格日期排序
摘要：{ dataIndex: 'contractSignDate', key: 'contractSignDate', title: '合同签订日期', width: 120, ellipsis: true, sorter: (a, b) => moment(a?.contractSignDate).v 阅读全文
posted @ 2024-05-03 16:53 SimoonJia 阅读(47) 评论(0) 推荐(0)
antd日期选择框，前后日期增加限制
摘要：注意：current是moment类型的，如需比较 需要将值类型统一后进行比较 const disabledDateStart = useCallback((current) => { if (!contractEndDateValue) { return false } else { return 阅读全文
posted @ 2024-05-03 10:13 SimoonJia 阅读(77) 评论(0) 推荐(0)
antd4表单手机号验证
摘要：// 自定义手机号校验规则 const validatePhone = (_, value) => { const phoneRegex = /^1[3456789]\d{9}$/; if (!value || phoneRegex.test(value)) { return Promise.res 阅读全文
posted @ 2024-05-02 09:42 SimoonJia 阅读(219) 评论(0) 推荐(0)
antd组件自定义title或者footer等
摘要：正确的写法可以让你拥有更加灵活多变的样式： <Drawer title={<div><Icontype="arrow-left"style={{ marginRight: "5px" }}/>{editState=="create"?"加油":"前进"}</div>} /> 阅读全文
posted @ 2023-02-21 17:32 SimoonJia 阅读(567) 评论(0) 推荐(0)
react表格、单选框等渲染富文本
摘要：const column=[ { key: "1", title: ( <> <span style={{ marginLeft: "4px" }}>123</span> </> ), }, { key: "2", title: ( <Tooltip title={longTitle}>{longT 阅读全文
posted @ 2023-02-20 19:49 SimoonJia 阅读(148) 评论(0) 推荐(0)
antd表单时间戳和单选框的使用
摘要：时间选择器 <Form.Item label="生日"> {getFieldDecorator('birthday', { rules: [{ type: 'object', required: true, message: 'Please select time!' }], })(<DatePic 阅读全文
posted @ 2022-06-27 13:56 SimoonJia 阅读(298) 评论(0) 推荐(0)