wise-white
wise-white2y ago

MUI ButtonGroup useForm

Hi, I have a seach from and a grid. Now i wanted to put a formbutton group with a status in each button. i used another form with a handlesubmit() and then the buttongroup, but 1 dont know why i cant make the API request on click (each button has type="submit"). I tried a input type="hidden" and others things, but i cant get it working. Thanks.
No description
7 Replies
kapa.ai
kapa.ai2y ago
Hi @pabloat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai2y ago
---------------------- Hmm, I don't know enough to give you a confident answer yet. However, I can provide you with some information on handling form submissions and buttons in refine. Refine provides an onFinish hook that lets you override the default configuration of the form submission and define what's sent to the server. You can use this hook to handle the form submission and make API requests. Here's an example of using the onFinish hook:
onFinish={(values) => {
// Your custom logic and API request here
});
onFinish={(values) => {
// Your custom logic and API request here
});
For more information on handling form submissions in refine, you can refer to these sources: - Dynamic Forms with React Hook Form - Handling submission (https://refine.dev/blog/dynamic-forms-in-react-hook-form/) - Save and Continue - Handling submit events on buttons (https://refine.dev/docs/advanced-tutorials/forms/save-and-continue) If you need more help, please provide more information about your specific use case and the code you're working with. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Dynamic Forms with React Hook Form | refine
How to build dynamic forms with React hook form in React CRUD apps.
Save and Continue | refine
refine provides you with the necessary methods to add this feature. This feature is familiar to Django users.
kapa.ai
kapa.ai2y ago
<@703699805242916934> kapa.ai is still learning and improving, please let us how it did by reacting below
other-emerald
other-emerald2y ago
Hey @pabloat, You can handle the submit function on button clicks. You can see an example here: https://refine.dev/docs/faq/#how-can-i-change-the-form-data-before-submitting-it-to-the-api
wise-white
wise-whiteOP2y ago
i think i missed some info. i have this: const { dataGridProps, search, filters, sorters } = useDataGrid< ILead, HttpError, ILeadFilterVariables >({ initialPageSize: 10, onSearch: (params) => { const filters: CrudFilters = []; const { texto, fechaInicio, fechaFin, usuario, estado } = params; filters.push({ field: "texto", operator: "eq", value: texto !== "" ? texto : undefined, }); const { register, handleSubmit, control } = useForm< BaseRecord, HttpError, ILeadFilterVariables >({ defaultValues: { estado: getDefaultFilter("estado.id", filters, "in"), ///filters.find(f=>(f as LogicalFilter).field === 'estado.id')?.value, texto: getDefaultFilter("texto", filters, "eq"), fechaInicio: getDefaultFilter("fechaInicio", filters, "eq"), fechaFin: getDefaultFilter("fechaFin", filters, "eq"), usuario: getDefaultFilter("usuario", filters, "eq"), }, }); <Box component="form" sx={{ display: "flex", flexDirection: "row", paddingTop: "20px" }} autoComplete="off" onSubmit={handleSubmit(search)} > <Grid container spacing={2}> <Grid item xs={12} lg={2}> <TextField fullWidth.... i am not undrstanding how the useForm works with useDataGrid on handleSubmit(search), useForm makes the API call? or useForm passes form values to the useDataGrid? and then, i dont know how to link this with a buttonGroup that is outside the: <Box component="form" sx={{ display: "flex", flexDirection: "row", paddingTop: "20px" }} autoComplete="off" onSubmit={handleSubmit(search)} >
other-emerald
other-emerald2y ago
Got it, you can use ‘setFilters’. ‘onSearch’ works with filters no magic under the hood. So, you use setFilters outside of the form to add or remove filter.
wise-white
wise-whiteOP2y ago
THANKS!

Did you find this page helpful?