从组件外部更新一个 antd RangePicker答案

【问题标题】：Update an antd RangePicker from outside the component从组件外部更新一个 antd RangePicker
【发布时间】：2021-05-07 15:09:06
【问题描述】：

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

代码如下：

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

【问题讨论】：

标签： javascript css reactjs antd

【解决方案1】：

antd 输入正在检查对象引用以更新其日期值。因此，克隆日期范围和更新状态修复了上述问题。

以前的代码：

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])

改变的功能：

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])

【讨论】：