React 第三方插件 —— Cron 表达式生成器（qnn-react-cron）
qnn-react-cron 可以看做 react-cron-antd 的升级版（具体“渊源”可见文档），现有功能如下：
🎉 全面支持 cron：秒、分、时、日、月、周、年
🎉 日及周条件互斥，自动改变响应值
🎉 支持反解析 cron 表达式到 UI
🎉 可结合此组件与 Antd 的下拉及输入组件封装成下拉输入框
🎉 国际化支持
🎉 TypeScript 支持
npm：https://www.npmjs.com/package/qnn-react-cron
github: https://github.com/wangzongming/qnn-react-cron
二、配置使用
1.安装
yarn add qnn-react-cron | npm i qnn-react-cron2.使用
引用：
import React from "react";
import Cron from "qnn-react-cron";
（1）直接调用
<Cron />默认生成表达式并赋值到变量：
import React, { useState } from "react";
import Cron from "qnn-react-cron";
export default () => {
const [cronValue, setCronValue] = useState('')
return <Cron
value={cronValue}
onOk={setCronValue}
/>
}
<Cron onOk={setCronValue}/> 是 <Cron onOk={value => setCronValue(value)}/> 的简写（2）赋值到表单（Form）
或是使用了表单（Form），比如需要将表达式赋值到 input 框中：
import React from "react";
import Cron from "qnn-react-cron";
export default () => {
const { getFieldValue, setFieldsValue } = props.form
return <Cron
value={getFieldValue('cronValue')}
onOk={value => setFieldsValue({ cronValue: value})}
/>
}
这样点击 生成 按钮即可赋值到 input 框中，在 input 框中修改也能同步到组件中。
（3）自定义功能按钮
但是组件默认带了两个按钮：解析到UI、生成，要想隐藏 解析到UI 按钮只能将两个按钮全部都走自定义（有其他想要的功能，比如 重置 也能使用下面的自定义按钮）：
import React, { useState } from "react";
import { Button } from "antd";
import Cron from "qnn-react-cron";
export default () => {
const { getFieldValue, setFieldsValue } = props.form
const [fns, setFns] = useState({})
return <Cron
value={getFieldValue('cronValue')}
// 相当于 ref
getCronFns={setFns}
// 自定义底部按钮后需要自行调用方法来或者值
footer={[
//默认值
<Button style={{ marginRight: 10 }} onClick={()=>fns.onParse()}>重置</Button>
<Button type="primary" onClick={()=>setFieldsValue({ cronValue: fns.getValue()}))}>生成</Button>
]}
/>
}
若是组件用在模态框（Modal）中，组件和模态框在右下方都有按钮，可以隐藏默认按钮并将按钮功能（解析到UI、生成）提取到其他地方，比如输入框（Input）的右侧：
import Cron from "qnn-react-cron";
import { Form, Input, Button } from "antd"
// import { useState } from "react";
const CronIndex = () => {
// const [cronRef, setCronRef] = useState()
let cronRef
const [ form ] = Form.useForm()
const { getFieldValue, setFieldsValue } = form
return <Form form={form}>
<Form.Item label="任务周期" name="cronValue">
<Input addonAfter={(
<Button
type='primary'
style={{ margin: '-1px -12px', border: 'none' }}
onClick={() => setFieldsValue({ cronValue: cronRef.getValue() })}>生成</Button>
)}/>
</Form.Item>
<Cron
value={getFieldValue('cronValue')}
getCronFns={fns => cronRef = fns}
// getCronFns={setCronRef}
footer={[]}
/>
</Form>
}
export default CronIndex已使用模式
<Cron
value={cronValue}
getCronFns={fns => cronRef = fns}
footer={[
<Button onClick={onCloseCronModal}>取消</Button>,
<Button style={{ marginRight: 10 }} onClick={()=>cronRef.onParse()}>重置</Button>,
<Button onClick={() => onRequestCron(cronRef.getValue())}>确定</Button>,
]}
/>
此时效果：<输入框> 实时同步 到<组件>，<组件>中变化在点击生成按钮时同步到<输入框>，
getCronFns 中对于 cronRef 值的获取不建议使用 useState（代码中有相关示例，已注释掉，感兴趣的可以尝试一下） ,会引起报错：Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn’t have a dependency array, or one of the dependencies changes on every render.
（4）隐藏指定 Tab
配置面板的隐藏与显示，默认如下：
<Cron
// 配置面板的隐藏, false 即隐藏
panesShow={{
second: true,
minute:true,
hour: true,
day: true,
month:true,
week:true,
year:true,
}}
// 默认显示哪个面板, 默认为 second， 如果隐藏了 second 需要自行设置
defaultTab={"second"}
/>
隐藏秒，默认显示分钟的设置，如下：
<Cron panesShow={{ second: false }} defaultTab={"minute"} />
默认值是：* * * * * ? *，因此在隐藏某个面板时，要做好对该部分隐藏值的处理