[React] Antd Form getFieldValue 的使用、DatePicker 禁用日期 disabledDate

在表单中，有时需要根据表单项的不同选择，对下面的表单项进行不同的显示，也就是说，后面的表单项依赖于前面的表单项，这时是可以使用getFieldValue 获取依赖项的值进行判断，从而显示不同的内容

<FormItem noStyle shouldUpdate={(prevValues, currentValues) => currentValues.rejected_reason !== prevValues.rejected_reason}>
 {({getFieldValue, resetFields}) => {
   return (
     getFieldValue('rejected_reason') === '其他' ? (
       <Form.Item wrapperCol={{span: 10, offset: 2}} name='otherRejectedReason' style={{width: '1110px'}}>
         <TextArea showCount maxLength={20} placeholder='请输入审核意见（审核不通过将意见通知用户）' />
       </Form.Item>
     ): null
   )
 }}
</FormItem>

比如上面代码，当审核不通过原因选择其他时，显示一个 TextArea 让用户填写

Antd 日期组件的选择

比如某个表单项，只能选择某个日期之后的日期

<Form.Item label='确诊时间' name='diagnosed_at' rules={utils.form.setRules({type: 'date'})}>
  <DatePicker
    style={{width: '300px'}}
    format='YYYY年MM月DD日'
    disabledDate={(cur) => cur && cur > moment().endOf('day')}
  />
</Form.Item>

不能选择今天之后的
disabledDate={(cur) => cur && cur > moment().endOf('day')}

不能选择今天之前的
disabledDate={(cur) => cur && cur < moment().endOf('day’)}

 // 意外发生时间限制在入会时间之后
  const accidentOccurrenceDisabledDate = (cur) => {
    return validFrom && moment(validFrom * 1000) > moment(cur)
  }

  // 治疗时间限制在意外发生时间之后
  const recuperateDateDisabledDate = (cur, accidentOccurrence) => {
    return accidentOccurrence && accidentOccurrence > moment(cur)
  }

  // 治疗时间应该限制在入会时间的30天后
  const recuperateDateOfSeriousDiseasesDisabledDate = (cur) => {
    return moment(validFrom * 1000).add(30, 'days') > moment(cur)
  }

  // 确诊时间限制在入会时间5天之后
  const diagnosedAtDisabledDate = (cur) => {
    return validFrom && moment(validFrom * 1000).add(5, 'days') > moment(cur)
  }