javascript - 在antd中按下清除按钮后清除日期选择器组件

Question

我们将 antd 用于 datepicker 并将时刻用作 util。我在这个问题上被困了一个星期。问题是，在过滤器侧面板中，按下清除后，所有字段都应该清除或设置为默认值（如果是下拉菜单）。但是日期纠察队没有重置。

上图是 Activity 组件，左侧是过滤器。一个基本过滤器，每个动作事件都从后端更改 API。

useEffect(()=>{
    if(clearFilter){
      form.resetFields()
      setActivitySearchText('')
      setFromDate('')
      setToDate('')
      setStatusSearchText('')
      onStatusChange('')
      setClearFilter(false)
    }
  },[clearFilter])

const onChangeFromDate = dateString => {
    setFromDate(new Date(dateString).toISOString())
  }

  const onPageToDate = dateString => {
    setToDate(new Date(dateString).toISOString())
  }

<StyledDatePicker
          allowClear={false}
          format={dateFormat}
          disabledDate={disabledFromDate}
          placeholder={'From'}
          onChange={(fromdate, dateString) =>
            onChangeFromDate(fromdate, dateString)
          }
          showTime={{
            use12Hours: true,
            defaultValue: moment('00:00:00', 'HH:mm:ss'),
          }}
        />
        <StyledDatePicker
          format={dateFormat}
          disabledDate={disabledToDate}
          placeholder={'To'}
          onChange={(todate, dateString) => onPageToDate(todate, dateString)}
          showTime={{ use12Hours: true }}
        />

上面的代码是所有组件的索引文件，我们将传递clearfilterprop，如果它为 true，则过滤器组件设置为StyledDatePicker空。只是包装在一些自定义宽度的样式组件中。就是这样。

您可以清楚地看到，onChangeFromDate()并且onPageToDate()是发生在 Change 上的事件函数，onChange. 正如我上面所说，我正在设置setFromDate('')and setTodate('')when clearFilteris true。

为了给出一些上下文，这是另一个主文件，道具从该文件传递给其他文件。在那里，我们将setFromDate('')和定义setTodate('')为，

const [fromDate, setFromDate] = useState('')
  const [toDate, setToDate] = useState('')

我想我已经提供了足够的细节。如果需要什么，请求，我准备给。这是一个现场项目，我被困了一个星期。提前谢谢！

标签： javascriptreactjsmomentjsantd