flat-fuchsia•8mo ago

uesForm Reset why not working?

const {register, handleSubmit, control, reset} = useForm<
    BaseRecord,
    HttpError,
    IPointsFilterVariables
  >({
    defaultValues: {
      q: getDefaultFilter("q", filters, "eq"),
      points: getDefaultFilter("points", filters, "eq"),
      order_date: getDefaultFilter("order_date", filters, "eq"),
    },
  });


 <LocalizationProvider dateAdapter={AdapterDayjs}>
                  <Grid container spacing={2}>
                    <Grid item xs={2} sm={2}>
                      <DatePicker
                        {...register("order_date")}
                        label="주문 시작일"
                        value={startValue}
                        name="start_date"
                        onChange={(startValue) => setStartValue(startValue)}
                        slotProps={{textField: {size: 'small'}}}
                      />
                    </Grid>
                    <Grid item xs={2} sm={2}>
                      <DatePicker
                        {...register("order_date")}
                        label="주문 종료일"
                        value={endValue}
                        name="end_date"
                        onChange={(endValue) => setEndValue(endValue)}
                        slotProps={{textField: {size: 'small'}}}
                      />
                    </Grid>
                  </Grid>
                </LocalizationProvider>

const {register, handleSubmit, control, reset} = useForm<
    BaseRecord,
    HttpError,
    IPointsFilterVariables
  >({
    defaultValues: {
      q: getDefaultFilter("q", filters, "eq"),
      points: getDefaultFilter("points", filters, "eq"),
      order_date: getDefaultFilter("order_date", filters, "eq"),
    },
  });


 <LocalizationProvider dateAdapter={AdapterDayjs}>
                  <Grid container spacing={2}>
                    <Grid item xs={2} sm={2}>
                      <DatePicker
                        {...register("order_date")}
                        label="주문 시작일"
                        value={startValue}
                        name="start_date"
                        onChange={(startValue) => setStartValue(startValue)}
                        slotProps={{textField: {size: 'small'}}}
                      />
                    </Grid>
                    <Grid item xs={2} sm={2}>
                      <DatePicker
                        {...register("order_date")}
                        label="주문 종료일"
                        value={endValue}
                        name="end_date"
                        onChange={(endValue) => setEndValue(endValue)}
                        slotProps={{textField: {size: 'small'}}}
                      />
                    </Grid>
                  </Grid>
                </LocalizationProvider>

I applied reset to useform, but the DatePicker value is not initialized.

4 Replies

kapa.ai•8mo ago

Hi @florent_26629. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, it seems like you're trying to reset the form values using the reset function from useForm. However, it's important to note that the reset function only resets the form fields that are registered with useForm. In your case, it seems like the DatePicker values are not being reset because they are not directly linked to the form's state. You're managing their state separately with setStartValue and setEndValue. To reset the DatePicker values, you might need to manually reset their state when you're resetting the form. Unfortunately, the provided extracts do not contain a direct example of this. However, there's a related issue discussed in one of the extracts where a user faced a similar problem with a search form not being reset. The solution suggested there was to manually reset the state of the form. In your case, it would look something like this:

const resetForm = () => {
  reset(); // This is the reset from useForm
  setStartValue(null); // Or whatever your initial value is
  setEndValue(null); // Or whatever your initial value is
};

const resetForm = () => {
  reset(); // This is the reset from useForm
  setStartValue(null); // Or whatever your initial value is
  setEndValue(null); // Or whatever your initial value is
};

You can then call resetForm when you want to reset the form and the DatePicker values. For more detailed information, you might want to check the Refine documentation (https://refine.dev/docs) or their Github issues (https://github.com/refinedev/refine/issues) for similar problems and solutions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below

flat-fuchsia•8mo ago

@kapa.ai how to call a resetForm?

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: Sorry @florent_26629, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist: Perhaps try again in 15mins?