从组件外部更新一个 antd RangePicker

Question

我看到antd RangePicker 输入是只读的。 但是，我需要在 antd 外部使用 React antd使用按钮来增加或减少日期范围来更新它。

这是代码：

import "./styles.css";
import 'antd/dist/antd.css';

import moment from 'moment-timezone';
import { useState, useCallback, useEffect } from 'react';
import { Button, DatePicker } from 'antd'

const { RangePicker } = DatePicker;


const defaultDateRange = [
  moment().subtract(1, 'weeks').startOf('isoWeek'),
  moment().subtract(1, 'weeks').endOf('isoWeek')
]

export default function App() {
  const [selectedPeriod, updatedSelectedPeriod] = useState(defaultDateRange)

  const findDateDiffDays = useCallback(() => {
    const [start, end] = selectedPeriod;
    return moment(end).diff(start, 'days')
  }, selectedPeriod)

  const changePeriod = useCallback((periodType) => () => {
    const [start, end] = selectedPeriod
    const days = findDateDiffDays()
    if(periodType === 'next') {
      updatedSelectedPeriod([start.add(days, 'days'), end.add(days, 'days')])
    } else if(periodType === 'prev') {
      updatedSelectedPeriod([start.subtract(days, 'days'), end.subtract(days, 'days')])
    }
  }, [selectedPeriod, updatedSelectedPeriod, findDateDiffDays])

  return (
    <div className="App">
      <Button
        size="small"
        disabled={!selectedPeriod}
        onClick={changePeriod('prev')}
      >
        -1
      </Button>
      <RangePicker
        allowClear={false}
        bordered={false}
        onChange={updatedSelectedPeriod}
        value={selectedPeriod}
        defaultValue={selectedPeriod}
        suffixIcon={null}
        size='small'
      />
      <Button
        size="small"
        disabled={!selectedPeriod}
        onClick={changePeriod('next')}
      >
        +1
      </Button>
    </div>
  );
}

当我尝试使用范围选择器更新字段时，没有用。 但是我想使用放置在外面的按钮来增加日期选择器的日期。

Codesandbox 链接可在此处试用： https://codesandbox.io/s/frosty-grass-bz3dh?file=/src/App.js:0-1647

Answer 1

antd输入正在检查 object 引用以更新其日期值。 因此，克隆日期范围并更新 state 修复了上述问题。

以前的代码：

const changePeriod = useCallback((periodType) => () => {
  const [start, end] = selectedPeriod
  const days = findDateDiffDays()
  if(periodType === 'next') {
    updatedSelectedPeriod([start.add(days, 'days'), end.add(days, 'days')])
  } else if(periodType === 'prev') {
    updatedSelectedPeriod([start.subtract(days, 'days'), end.subtract(days, 'days')])
  }
}, [selectedPeriod, updatedSelectedPeriod, findDateDiffDays])

更改 function：

const changePeriod = useCallback((periodType) => () => {
  const [start, end] = selectedPeriod
  const days = findDateDiffDays()
  if(periodType === 'next') {
    updatedSelectedPeriod([start.clone().add(days, 'days'), end.clone().add(days, 'days')])
  } else if(periodType === 'prev') {
    updatedSelectedPeriod([start.clone().subtract(days, 'days'), end.clone().subtract(days, 'days')])
  }
}, [selectedPeriod, updatedSelectedPeriod, findDateDiffDays])