如何在單擊時清除按鈕上的日期范圍選擇器值？

Question

這是我的代碼，我有日期范圍選擇器和一個清除按鈕。 當我單擊清除按鈕時，狀態會發生變化（更改為空值）並且我想在 UI 中顯示它。 如何設置日期范圍選擇器的值來顯示它？

const [para, _setPara] = useState({
  startDate: null,
  endDate:null
} as any);

const onChange =(date:any, dateString:any) =>{
    setPara({
      startDate:date[0].format("YYYY-MM-DD HH:mm:ss"),
      endDate: date[1].format("YYYY-MM-DD HH:mm:ss")
    })
}

const clearSearch =()=>{
  setPara({
    startDate: null,
    endDate:null
  })
}

return(
<RangePicker onChange={onChange} allowClear={false} value={?} />
<Button
   type="primary"
   onClick={() => clearSearch()}
   danger
>
)

Answer 1

您在onChange獲得的值與組件期望的格式相同，因此您需要將其保持原樣並在需要時轉換為字符串，或者將字符串保持在狀態中並進行轉換到每個渲染的正確格式。 您可以傳遞數組中的值

<RangePicker onChange={onChange} allowClear={false} value={[moment1,moment2]} />

要從字符串創建時刻，您需要導入moment並使用您正在使用的日期格式調用它：

import moment from 'moment';
...
const moment1=moment(startDate,"YYYY-MM-DD HH:mm:ss")

清除只是將兩個時刻設置為null