自己写的一个CRON生成器,写的时候没有考虑组件化,所以比较繁杂,也没什么时间去优化,有需要的自己优化结构哈~

使用的是react+Ant+mobx,虽然加入了国际化组件但是并没有使用到,就被砍了,因为用户也不会用。

代码比较长,也比较笨,写的时候仅仅是想先完成功能再去优化,可惜没等我优化就凉了,后续有时间再改,代码下面有运行截图。

另外这里面的逻辑不能保证是正确的,因为我没有进行很多的测试,要使用请多测试,要是有bug,一定要说出来!我改还不行吗!!

附上全部代码

import React from 'react'
import { Input,Tabs,Radio,Checkbox, Row,Col } from 'antd';
import { observer, inject } from 'mobx-react'
import { injectIntl, intlShape } from 'react-intl'
const TabPane = Tabs.TabPane;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;
const options =[];
const hourOptions =[];
const daysForMonOptions =[];
const monthOptions =[];
const weekOptions =[];
for(let i = 0;i < 60;i++){ options.push(i.toString()) };
for(let i = 0;i < 24;i++){ hourOptions.push(i.toString()) };
for(let i = 1;i < 32;i++){ daysForMonOptions.push(i.toString()) };
for(let i = 1;i < 13;i++){ monthOptions.push(i.toString()) };
for(let i = 1;i < 7;i++){ weekOptions.push(i.toString()) };

@inject('UI','List')
@observer
class CRONExpression extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      searchValue:'',
      CRONExpression:'',
      CRONVal:'',
      secondVal:'*',
      minVal:'*',
      hourVal:'*',
      dayOfMonVal:'*',
      MonVal:'*',
      dayOfWekVal:'?',
      yearVal:'',
      secondCycleStart:'',
      secondCycleEnd:'',
      secondStart:'',
      secondEvery:'',
      secondChecked:'',
      SecondRadiochecked:1,
      minuteCycleStart:'',
      minuteCycleEnd:'',
      minuteStart:'',
      minuteEvery:'',
      minuteChecked:'',
      minuteRadiochecked:1,
      hourCycleStart:'',
      hourCycleEnd:'',
      hourStart:'',
      hourEvery:'',
      hourChecked:'',
      hourRadiochecked:1,
      daysCycleStart:'',
      daysCycleEnd:'',
      daysStart:'',
      daysEvery:'',
      daysChecked:'',
      daysForWorking:'',
      daysRadiochecked:1,
      monthCycleStart:'',
      monthCycleEnd:'',
      monthStart:'',
      monthEvery:'',
      monthChecked:'',
      monthRadiochecked:1,
      weekCycleStart:'',
      weekCycleEnd:'',
      weekStart:'',
      weekEvery:'',
      weekChecked:'',
      weekRadiochecked:1,
      yearCycleStart:'',
      yearCycleEnd:'',
      yearRadiochecked:1,
    }
  }
  //生成复选框
  createChecks = (data) => {
    return data.map(index => {
      return( <Col key={index} span={4}><Checkbox  value={index.toString()}>{index}</Checkbox></Col>)
    })
  }
  //CRONtabs页切换回调
  callback = (key) => {
    console.log(key);
  }

  //CRON-秒-radio选择回调
  onSecondRadioChange = (e) =>{
    // console.log('Second radio checked',e.target.value)
    let SecondRadiochecked = e.target.value;
    this.setState({SecondRadiochecked});
    switch(SecondRadiochecked){
      case 1 : this.setState({ secondVal:'*' ,minVal:'*',hourVal:'*',dayOfMonVal:'*',MonVal:'*',dayOfWekVal:'?',yearVal:'',}); break;
      case 2 : this.setState({ secondVal:this.state.secondCycleStart+'-'+this.state.secondCycleEnd }); break;
      case 3 : this.setState({ secondVal:this.state.secondStart+'/'+this.state.secondEvery }); break;
      case 4 : this.setState({ secondVal:this.state.secondChecked }); break;
    }
    // this.CRONExpression();
  }
  //CRON-秒-指定选择复选框
  onSecndcheckChange=(checkedValues)=> { 
    let secondChecked = checkedValues.join(',');;
    if(this.state.SecondRadiochecked==4){
      this.setState({ secondVal:secondChecked }) 
    }
    this.setState({secondChecked:secondChecked});
  };
  //CRON-秒-指定周期-周期开始值输入框的回调
  secondCycleStart = (e) =>{ 
    if(this.state.SecondRadiochecked==2){
      this.setState({ 
        secondVal:e.target.value+'-'+this.state.secondCycleEnd
       }) 
    }
    this.setState({secondCycleStart:e.target.value});
  };
  //CRON-秒-指定周期-周期结束值输入框的回调
  secondCycleEnd = (e) =>{ 
    if(this.state.SecondRadiochecked==2){
      this.setState({ 
        secondVal:this.state.secondCycleStart+'-'+e.target.value
       }) 
    }
    this.setState({secondCycleEnd:e.target.value});
  };
  //CRON-秒-指定从几秒开始
  secondStart = (e) =>{ 
    if(this.state.SecondRadiochecked==3){
      this.setState({ 
        secondVal:e.target.value+'/'+this.state.secondEvery 
      });
    }
    this.setState({secondStart:e.target.value});
  };
  //CRON-秒-指定每几秒执行一次
  secondEvery = (e) =>{ 
    if(this.state.SecondRadiochecked==3){
      this.setState({ 
        secondVal:this.state.secondStart+'/'+e.target.value 
      });
    }
    this.setState({secondEvery:e.target.value});
  };
  //CRON-分钟-radio选择回调
  onMinuteRadioChange = (e) =>{
    // console.log('Second radio checked',e.target.value)
    let minuteRadiochecked = e.target.value;
    this.setState({minuteRadiochecked});
    switch(minuteRadiochecked){
      case 1 : this.setState({ minVal:'*',hourVal:'*',dayOfMonVal:'*',MonVal:'*',dayOfWekVal:'?',yearVal:'' }); break;
      case 2 : this.setState({ minVal:this.state.minuteCycleStart+'-'+this.state.minuteCycleEnd }); break;
      case 3 : this.setState({ minVal:this.state.minuteStart+'/'+this.state.minuteEvery }); break;
      case 4 : this.setState({ minVal:this.state.minuteChecked }); break;
    }
    if(minuteRadiochecked != 1){
      const {secondVal}=this.state
      if(secondVal=='*'){ this.setState({secondVal:'0'}) };
    }
    // this.CRONExpression();
  }
  //CRON-分钟-指定选择复选框
  onMinuteCheckChange=(checkedValues)=> { 
    let minuteChecked = checkedValues.join(',');;
    if(this.state.minuteRadiochecked==4){ this.setState({ minVal:minuteChecked }) }
    this.setState({minuteChecked:minuteChecked});
  };
  //CRON-分钟-指定周期-周期开始值输入框的回调
  minuteCycleStart = (e) =>{ 
    if(this.state.minuteRadiochecked==2){
      this.setState({ minVal:e.target.value+'-'+this.state.minuteCycleEnd }) 
    }
    this.setState({minuteCycleStart:e.target.value});
  };
  //CRON-分钟-指定周期-周期结束值输入框的回调
  minuteCycleEnd = (e) =>{ 
    if(this.state.minuteRadiochecked==2){
      this.setState({ minVal:this.state.minuteCycleStart+'-'+e.target.value }) 
    }
    this.setState({minuteCycleEnd:e.target.value});
  };
  //CRON-分钟-指定从几秒开始
  minuteStart = (e) =>{ 
    if(this.state.minuteRadiochecked==3){
      this.setState({ minVal:e.target.value+'/'+this.state.minuteEvery });
    }
    this.setState({minuteStart:e.target.value});
  };
  //CRON-分钟-指定每几秒执行一次
  minuteEvery = (e) =>{ 
    if(this.state.minuteRadiochecked==3){
      this.setState({ minVal:this.state.minuteStart+'/'+e.target.value });
    }
    this.setState({minuteEvery:e.target.value});
  };
  //CRON-小时-radio选择回调
  onHourRadioChange = (e) =>{
    // console.log('Second radio checked',e.target.value)
    let hourRadiochecked = e.target.value;
    this.setState({hourRadiochecked});
    switch(hourRadiochecked){
      case 1 : this.setState({ hourVal:'*',dayOfMonVal:'*',MonVal:'*',dayOfWekVal:'?',yearVal:'' }); break;
      case 2 : this.setState({ hourVal:this.state.hourCycleStart+'-'+this.state.hourCycleEnd }); break;
      case 3 : this.setState({ hourVal:this.state.hourStart+'/'+this.state.hourEvery }); break;
      case 4 : this.setState({ hourVal:this.state.hourChecked }); break;
    }
    if(hourRadiochecked != 1){
      const {secondVal,minVal}=this.state
      if(secondVal=='*'){ this.setState({secondVal:'0'}) };
      if(minVal=='*'){ this.setState({minVal:'0'}) };
    }
    // this.CRONExpression();
  }
  //CRON-小时-指定选择复选框
  onHourCheckChange=(checkedValues)=> { 
    let hourChecked = checkedValues.join(',');;
    if(this.state.hourRadiochecked==4){ this.setState({ hourVal:hourChecked }) }
    this.setState({hourChecked:hourChecked});
  };
  //CRON-小时-指定周期-周期开始值输入框的回调
  hourCycleStart = (e) =>{ 
    if(this.state.hourRadiochecked==2){
      this.setState({ hourVal:e.target.value+'-'+this.state.hourCycleEnd }) 
    }
    this.setState({hourCycleStart:e.target.value});
  };
  //CRON-小时-指定周期-周期结束值输入框的回调
  hourCycleEnd = (e) =>{ 
    if(this.state.hourRadiochecked==2){
      this.setState({ hourVal:this.state.hourCycleStart+'-'+e.target.value }) 
    }
    this.setState({hourCycleEnd:e.target.value});
  };
  //CRON-小时-指定从几秒开始
  hourStart = (e) =>{ 
    if(this.state.hourRadiochecked==3){
      this.setState({ hourVal:e.target.value+'/'+this.state.hourEvery });
    }
    this.setState({hourStart:e.target.value});
  };
  //CRON-小时-指定每几秒执行一次
  hourEvery = (e) =>{ 
    if(this.state.hourRadiochecked==3){
      this.setState({ hourVal:this.state.hourStart+'/'+e.target.value });
    }
    this.setState({hourEvery:e.target.value});
  };
  //CRON-日-radio选择回调
  onDaysRadioChange = (e) =>{
    // console.log('Second radio checked',e.target.value)
    let daysRadiochecked = e.target.value;
    this.setState({daysRadiochecked});
    switch(daysRadiochecked){
      case 1 : this.setState({ dayOfMonVal:'*',MonVal:'*',dayOfWekVal:'?',yearVal:'' }); break;
      case 2 : this.setState({ dayOfMonVal:'?' }); break;
      case 3 : this.setState({ dayOfMonVal:this.state.daysCycleStart+'-'+this.state.daysCycleEnd }); break;
      case 4 : this.setState({ dayOfMonVal:this.state.daysStart+'/'+this.state.daysEvery }); break;
      case 5 : this.setState({ dayOfMonVal:this.state.daysForWorking }); break;
      case 6 : this.setState({ dayOfMonVal:'L'}); break;
      case 7 : this.setState({ dayOfMonVal:this.state.daysChecked }); break;
    }
    if(daysRadiochecked != 1){
      const {secondVal,minVal,hourVal}=this.state
      if(secondVal=='*'){ this.setState({secondVal:'0'}) };
      if(minVal=='*'){ this.setState({minVal:'0'}) };
      if(hourVal=='*'){ this.setState({hourVal:'0'}) };
    }
    // this.CRONExpression();
  }
  //CRON-日-指定选择复选框
  onDaysCheckChange=(checkedValues)=> { 
    let daysChecked = checkedValues.join(',');;
    if(this.state.daysRadiochecked==7){ this.setState({ dayOfMonVal:daysChecked }) }
    this.setState({daysChecked:daysChecked});
  };
  //CRON-日-指定周期-周期开始值输入框的回调
  daysCycleStart = (e) =>{ 
    if(this.state.daysRadiochecked==3){
      this.setState({ dayOfMonVal:e.target.value+'-'+this.state.daysCycleEnd }) 
    }
    this.setState({daysCycleStart:e.target.value});
  };
  //CRON-日-指定周期-周期结束值输入框的回调
  daysCycleEnd = (e) =>{ 
    if(this.state.daysRadiochecked==3){
      this.setState({ dayOfMonVal:this.state.daysCycleStart+'-'+e.target.value }) 
    }
    this.setState({daysCycleEnd:e.target.value});
  };
  //CRON-日-指定从多少开始
  daysStart = (e) =>{ 
    if(this.state.daysRadiochecked==4){
      this.setState({ dayOfMonVal:e.target.value+'/'+this.state.daysEvery });
    }
    this.setState({daysStart:e.target.value});
  };
  //CRON-日-指定每多久执行一次
  daysEvery = (e) =>{ 
    if(this.state.daysRadiochecked==4){
      this.setState({ dayOfMonVal:this.state.daysStart+'/'+e.target.value });
    }
    this.setState({daysEvery:e.target.value});
  };
  //CRON-日-指定最近日期的工作日执行
  daysForWorking = (e) =>{ 
    if(this.state.daysRadiochecked==5){
      this.setState({ dayOfMonVal:e.target.value+'W' });
    }
    this.setState({daysForWorking:e.target.value+'W' });
  };
  //CRON-月-radio选择回调
  onMonthRadioChange = (e) =>{
    // console.log('Second radio checked',e.target.value)
    let monthRadiochecked = e.target.value;
    this.setState({monthRadiochecked});
    switch(monthRadiochecked){
      case 1 : this.setState({ MonVal:'*',dayOfWekVal:'?',yearVal:'' }); break;
      case 2 : this.setState({ MonVal:'?' }); break;
      case 3 : this.setState({ MonVal:this.state.monthCycleStart+'-'+this.state.monthCycleEnd }); break;
      case 4 : this.setState({ MonVal:this.state.monthStart+'/'+this.state.monthEvery }); break;
      case 5 : this.setState({ MonVal:this.state.monthChecked }); break;
    }
    if(monthRadiochecked != 1){
      const {secondVal,minVal,hourVal,dayOfMonVal}=this.state
      if(secondVal=='*'){ this.setState({secondVal:'0'}) };
      if(minVal=='*'){ this.setState({minVal:'0'}) };
      if(hourVal=='*'){ this.setState({hourVal:'0'}) };
      if(dayOfMonVal=='*'){ this.setState({dayOfMonVal:'0'}) };
    }
    // this.CRONExpression();
  }
  //CRON-月-指定选择复选框
  onMonthCheckChange=(checkedValues)=> { 
    let monthChecked = checkedValues.join(',');;
    if(this.state.monthRadiochecked==5){ this.setState({ MonVal:monthChecked }) }
    this.setState({monthChecked:monthChecked});
  };
  //CRON-月-指定周期-周期开始值输入框的回调
  monthCycleStart = (e) =>{ 
    if(this.state.monthRadiochecked==3){
      this.setState({ MonVal:e.target.value+'-'+this.state.monthCycleEnd }) 
    }
    this.setState({monthCycleStart:e.target.value});
  };
  //CRON-月-指定周期-周期结束值输入框的回调
  monthCycleEnd = (e) =>{ 
    if(this.state.monthRadiochecked==3){
      this.setState({ MonVal:this.state.monthCycleStart+'-'+e.target.value }) 
    }
    this.setState({monthCycleEnd:e.target.value});
  };
  //CRON-月-指定从多久开始
  monthStart = (e) =>{ 
    if(this.state.monthRadiochecked==4){
      this.setState({ MonVal:e.target.value+'/'+this.state.monthEvery });
    }
    this.setState({monthStart:e.target.value});
  };
  //CRON-月-指定每多久执行一次
  monthEvery = (e) =>{ 
    if(this.state.monthRadiochecked==4){
      this.setState({ MonVal:this.state.monthStart+'/'+e.target.value });
    }
    this.setState({monthEvery:e.target.value});
  };
  //CRON-周-radio选择回调
  onWeekRadioChange = (e) =>{
    // console.log('Second radio checked',e.target.value)
    let weekRadiochecked = e.target.value;
    this.setState({weekRadiochecked});
    switch(weekRadiochecked){
      case 1 : this.setState({ dayOfWekVal:'*',yearVal:'' }); break;
      case 2 : this.setState({ dayOfWekVal:'?' }); break;
      case 3 : this.setState({ dayOfWekVal:this.state.weekCycleStart+'-'+this.state.weekCycleEnd }); break;
      case 4 : this.setState({ dayOfWekVal:this.state.weekStart+'#'+this.state.weekEvery }); break;
      case 5 : this.setState({ dayOfWekVal:'L' }); break;
      case 6 : this.setState({ dayOfWekVal:this.state.weekChecked }); break;
    }
    if(weekRadiochecked != 1){
      const {secondVal,minVal,hourVal,dayOfMonVal,MonVal}=this.state
      if(secondVal=='*'){ this.setState({secondVal:'0'}) };
      if(minVal=='*'){ this.setState({minVal:'0'}) };
      if(hourVal=='*'){ this.setState({hourVal:'0'}) };
      if(dayOfMonVal=='*'){ this.setState({dayOfMonVal:'0'}) };
      if(MonVal=='*'){ this.setState({MonVal:'0'}) };
    }
    // this.CRONExpression();
  }
  //CRON-周-指定选择复选框
  onWeekCheckChange=(checkedValues)=> { 
    let weekChecked = checkedValues.join(',');;
    if(this.state.weekRadiochecked==6){ this.setState({ dayOfWekVal:weekChecked }) }
    this.setState({weekChecked:weekChecked});
  };
  //CRON-周-指定周期-周期开始值输入框的回调
  weekCycleStart = (e) =>{ 
    if(this.state.weekRadiochecked==3){
      this.setState({ dayOfWekVal:e.target.value+'-'+this.state.weekCycleEnd }) 
    }
    this.setState({weekCycleStart:e.target.value});
  };
  //CRON-周-指定周期-周期结束值输入框的回调
  weekCycleEnd = (e) =>{ 
    if(this.state.weekRadiochecked==3){
      this.setState({ dayOfWekVal:this.state.weekCycleStart+'-'+e.target.value }) 
    }
    this.setState({weekCycleEnd:e.target.value});
  };
  //CRON-周-指定从多久开始
  weekStart = (e) =>{ 
    if(this.state.weekRadiochecked==4){
      this.setState({ dayOfWekVal:e.target.value+'#'+this.state.weekEvery });
    }
    this.setState({weekStart:e.target.value});
  };
  //CRON-周-指定每多久执行一次
  weekEvery = (e) =>{ 
    if(this.state.weekRadiochecked==4){
      this.setState({ dayOfWekVal:this.state.weekStart+'#'+e.target.value });
    }
    this.setState({weekEvery:e.target.value});
  };
  //CRON-年-radio选择回调
  onYearRadioChange = (e) =>{
    // console.log('Second radio checked',e.target.value)
    let yearRadiochecked = e.target.value;
    this.setState({yearRadiochecked});
    switch(yearRadiochecked){
      case 1 : this.setState({ yearVal:'' }); break;
      case 2 : this.setState({ yearVal:'*' }); break;
      case 3 : this.setState({ yearVal:this.state.yearCycleStart+'-'+this.state.yearCycleEnd }); break;
    }
    if(yearRadiochecked != 2){
      const {secondVal,minVal,hourVal,dayOfMonVal,MonVal,dayOfWekVal}=this.state
      if(secondVal=='*'){ this.setState({secondVal:'0'}) };
      if(minVal=='*'){ this.setState({minVal:'0'}) };
      if(hourVal=='*'){ this.setState({hourVal:'0'}) };
      if(dayOfMonVal=='*'){ this.setState({dayOfMonVal:'0'}) };
      if(MonVal=='*'){ this.setState({MonVal:'0'}) };
      if(dayOfWekVal=='*'){ this.setState({dayOfWekVal:'?'}) };
    }
    // this.CRONExpression();
  }
  //CRON-年-指定周期-周期开始值输入框的回调
  yearCycleStart = (e) =>{ 
    if(this.state.yearRadiochecked==3){
      this.setState({ yearVal:e.target.value+'-'+this.state.yearCycleEnd }) 
    }
    this.setState({yearCycleStart:e.target.value});
  };
  //CRON-年-指定周期-周期结束值输入框的回调
  yearCycleEnd = (e) =>{ 
    if(this.state.yearRadiochecked==3){
      this.setState({ yearVal:this.state.yearCycleStart+'-'+e.target.value }) 
    }
    this.setState({yearCycleEnd:e.target.value});
  };
  componentWillUpdate (nextProps,nextState) {
    // console.log(nextState,'next')
    this.props.UI.changeCRONExpression(
      nextState.secondVal+' '+
      nextState.minVal+' '+
      nextState.hourVal+' '+
      nextState.dayOfMonVal+' '+
      nextState.MonVal+' '+
      nextState.dayOfWekVal+' '+
      nextState.yearVal
    )
  }
  render () {

    const radioStyle = {
      display: 'block',
      height: '30px',
      lineHeight: '30px',
    };
    return (
        <div className='too'>
          <Tabs defaultActiveKey="1" onChange={this.callback}>
            <TabPane tab="秒" key="1"style={{
                    margin: '24px 0px', background: '#fff', minHeight: 280,
                }}>
            <RadioGroup name="radiogroup"  onChange={this.onSecondRadioChange}>
              <Radio style={radioStyle} value={1}>每秒 允许的通配符[, - * /] </Radio>
              <Radio style={radioStyle} value={2}>按周期
                周期从 <Input type='number' size='small' onChange={this.secondCycleStart} style={{ width: 100 }}/>
                - <Input size='small' type='number' onChange={this.secondCycleEnd} style={{ width: 100 }}/> 秒
              </Radio> 
              <Radio style={radioStyle} value={3}>
                从 <Input type='number' size='small' onChange={this.secondStart} style={{ width: 100 }}/> 秒开始,
                每 <Input type='number' size='small' onChange={this.secondEvery} style={{ width: 100 }}/> 秒执行一次
              </Radio> 
              <Radio style={radioStyle} value={4}>指定<br/>
                <CheckboxGroup style={{ width: '100%' }} onChange={this.onSecndcheckChange} >
                  <Row> {this.createChecks(options)} </Row>
                </CheckboxGroup>
              </Radio>
            </RadioGroup>
            </TabPane>
            <TabPane tab="分钟" key="2">
              <RadioGroup name="radiogroup"  onChange={this.onMinuteRadioChange}>
                <Radio style={radioStyle} value={1}>分钟 允许的通配符[, - * /] </Radio>
                <Radio style={radioStyle} value={2}>按周期
                  周期从 <Input type='number' size='small' onChange={this.minuteCycleStart} style={{ width: 100 }}/>
                  - <Input size='small' type='number' onChange={this.minuteCycleEnd} style={{ width: 100 }}/> 分钟
                </Radio> 
                <Radio style={radioStyle} value={3}>
                  从 <Input type='number' size='small' onChange={this.minuteStart} style={{ width: 100 }}/> 分钟开始,
                  每 <Input type='number' size='small' onChange={this.minuteEvery} style={{ width: 100 }}/> 分钟执行一次
                </Radio> 
                <Radio style={radioStyle} value={4}>指定<br/>
                  <CheckboxGroup style={{ width: '100%' }} onChange={this.onMinuteCheckChange} >
                    <Row> {this.createChecks(options)} </Row>
                  </CheckboxGroup>
                </Radio>
              </RadioGroup>
            </TabPane>
            <TabPane tab="小时" key="3">
              <RadioGroup name="radiogroup"  onChange={this.onHourRadioChange}>
                <Radio style={radioStyle} value={1}>小时 允许的通配符[, - * /] </Radio>
                <Radio style={radioStyle} value={2}>按周期
                  周期从 <Input type='number' size='small' onChange={this.hourCycleStart} style={{ width: 100 }}/>
                  - <Input size='small' type='number' onChange={this.hourCycleEnd} style={{ width: 100 }}/> 小时
                </Radio> 
                <Radio style={radioStyle} value={3}>
                  从 <Input type='number' size='small' onChange={this.hourStart} style={{ width: 100 }}/> 小时开始,
                  每 <Input type='number' size='small' onChange={this.hourEvery} style={{ width: 100 }}/> 小时执行一次
                </Radio> 
                <Radio style={radioStyle} value={4}>指定<br/>
                  <CheckboxGroup style={{ width: '100%' }} onChange={this.onHourCheckChange} >
                    <Row> {this.createChecks(hourOptions)} </Row>
                  </CheckboxGroup>
                </Radio>
              </RadioGroup>
            </TabPane>
            <TabPane tab="日" key="4">
              <RadioGroup name="radiogroup"  onChange={this.onDaysRadioChange}>
                <Radio style={radioStyle} value={1}>日 允许的通配符[, - * / L W] </Radio>
                <Radio style={radioStyle} value={2}>不指定 </Radio>
                <Radio style={radioStyle} value={3}>按周期
                  周期从 <Input type='number' size='small' onChange={this.daysCycleStart} style={{ width: 100 }}/>
                  - <Input size='small' type='number' onChange={this.daysCycleEnd} style={{ width: 100 }}/> 日
                </Radio> 
                <Radio style={radioStyle} value={4}>
                  从 <Input type='number' size='small' onChange={this.daysStart} style={{ width: 100 }}/> 日开始,
                  每 <Input type='number' size='small' onChange={this.daysEvery} style={{ width: 100 }}/> 日执行一次
                </Radio> 
                <Radio style={radioStyle} value={5}>
                每月 <Input type='number' size='small' onChange={this.daysForWorking} style={{ width: 100 }}/> 号最近的工作日
                </Radio>
                <Radio style={radioStyle} value={6}>每月的最后一天 </Radio>
                <Radio style={radioStyle} value={7}>指定<br/>
                  <CheckboxGroup style={{ width: '100%' }} onChange={this.onDaysCheckChange} >
                    <Row> {this.createChecks(daysForMonOptions)} </Row>
                  </CheckboxGroup>
                </Radio>
              </RadioGroup>
            </TabPane>
            <TabPane tab="月" key="5">
              <RadioGroup name="radiogroup"  onChange={this.onMonthRadioChange}>
                <Radio style={radioStyle} value={1}>月 允许的通配符[, - * /] </Radio>
                <Radio style={radioStyle} value={2}>不指定 </Radio>
                <Radio style={radioStyle} value={3}>按周期
                  周期从 <Input type='number' size='small' onChange={this.monthCycleStart} style={{ width: 100 }}/>
                  - <Input size='small' type='number' onChange={this.monthCycleEnd} style={{ width: 100 }}/> 月
                </Radio> 
                <Radio style={radioStyle} value={4}>
                  从 <Input type='number' size='small' onChange={this.monthStart} style={{ width: 100 }}/> 月开始,
                  每 <Input type='number' size='small' onChange={this.monthEvery} style={{ width: 100 }}/> 月执行一次
                </Radio> 
                <Radio style={radioStyle} value={5}>指定<br/>
                  <CheckboxGroup style={{ width: '100%' }} onChange={this.onMonthCheckChange} >
                    <Row> {this.createChecks(monthOptions)} </Row>
                  </CheckboxGroup>
                </Radio>
              </RadioGroup>
            </TabPane>
            <TabPane tab="周" key="6">
              <RadioGroup name="radiogroup"  onChange={this.onWeekRadioChange}>
                <Radio style={radioStyle} value={1}>周 允许的通配符[, - * L #] </Radio>
                <Radio style={radioStyle} value={2}>不指定 </Radio>
                <Radio style={radioStyle} value={3}>按周期
                  周期从 星期<Input type='number' size='small' onChange={this.weekCycleStart} style={{ width: 100 }}/>
                  - <Input size='small' type='number' onChange={this.weekCycleEnd} style={{ width: 100 }}/> 
                </Radio> 
                <Radio style={radioStyle} value={4}>
                  第 <Input type='number' size='small' onChange={this.weekStart} style={{ width: 100 }}/> 周
                  的星期 <Input type='number' size='small' onChange={this.weekEvery} style={{ width: 100 }}/>
                </Radio> 
                <Radio style={radioStyle} value={5}>每月的最后一周 </Radio>
                <Radio style={radioStyle} value={6}>指定<br/>
                  <CheckboxGroup style={{ width: '100%' }} onChange={this.onWeekCheckChange} >
                    <Row> {this.createChecks(weekOptions)} </Row>
                  </CheckboxGroup>
                </Radio>
              </RadioGroup>
            </TabPane>
            <TabPane tab="年" key="7">
              <RadioGroup name="radiogroup"  onChange={this.onYearRadioChange}>
                <Radio style={radioStyle} value={1}>不指定 允许的通配符[, - * /] 非必填 </Radio>
                <Radio style={radioStyle} value={2}>每年 </Radio>
                <Radio style={radioStyle} value={3}>按周期
                  周期从 <Input type='number' size='small' onChange={this.yearCycleStart} style={{ width: 100 }}/>
                  - <Input size='small' type='number' onChange={this.yearCycleEnd} style={{ width: 100 }}/>
                </Radio> 
              </RadioGroup>
            </TabPane>
          </Tabs>
          CRON表达式:
          <Input 
            type='text' 
            size='small'  
            style={{ width: 200 }}  
            value={this.props.UI.CRONExpression}
            />
            <p style={{color:'red'}}>注意:若点击确定生成,原属任务的CRON表达式将覆盖。</p>
        </div>
    )
  }
}

CRONExpression.propTypes = {
  intl: intlShape.isRequired
}
export default injectIntl(CRONExpression)

以下是运行截图:

CronTrigger java 生成表达式 cron表达式生成器代码_i++

CronTrigger java 生成表达式 cron表达式生成器代码_react_02

CronTrigger java 生成表达式 cron表达式生成器代码_输入框_03