Question

I have this custom filter for date , filter button is working as expected but reset button is not working, can anyone help me,what s wrong here?

Below is my code which contain handlesearch,handlereset functions and all the props that is passed in the columns.So for clearing the filter i am using clearFilters method which we get from filterDropdown. But i am not able to reset the filter.

const handleSearch = (selectedKeys, confirm, dataIndex) => {
    console.log(selectedKeys, confirm, dataIndex)
    confirm()
  }

  const handleReset = (clearFilters, dataIndex) => {
    console.log(clearFilters)
    clearFilters()
  }
  const getColumnSearchProps = (dataIndex) => ({
    filterDropdown: ({
      setSelectedKeys,
      selectedKeys,
      confirm,
      clearFilters,
    }) => (
      <div style={{ padding: 8 }}>
        <Form form={form}>
          <DatePicker
            format={ DD-MMM-YYYY }
            onChange={(e) => {
              setSelectedKeys([e.format( DD-MMM-YYYY )])
            }}
            allowClear={false}
          />

          <Button
            type="primary"
            onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
            icon={<Filter />}
            htmlType="submit"
            size="small"
            style={{ width: 90 }}
          ></Button>
          <Button
            type="primary"
            onClick={() => handleReset(clearFilters, dataIndex)}
            size="small"
            icon={<Filter />}
            style={{ width: 90 }}
          >
            Reset
          </Button>
        </Form>
      </div>
    ),
    filterIcon: (filtered) => (
      <Filter style={{ color: filtered ?  #1890ff  : undefined }} />
    ),
    onFilter: (value, record) => {
      return moment(record[dataIndex]).format( DD-MMM-YYYY ) === value
    },

   
   
  })

Answer 1

Can you try put confirm() in handleReset function.

const handleReset = (clearFilters,confirm, dataIndex) => {
      console.log(clearFilters)
      clearFilters()
      confirm()
}

This will trigger props onChange in component Table ANTD

友情链接