call the api only on button click.
const [searchTerm, setSearchTerm] = useState('');
// const [searchDetail, setSearchDetail] = useState('');
const [isApiEnabled, setIsApiEnabled] = useState(false);
const [buttonLoading, setButtonLoading] = useState<boolean>(false);
// const [searchResults, setSearchResults] = useState([]);
const { data: customerDetails } = useCustom<
CustomerSearchResponse,
ApiErrorResponse
>({
method: 'get',
url:
${apiUrl}/${apiPaths.customer.searchCustomer(searchTerm)}
,
errorNotification: (error: ApiErrorResponse | undefined) => {
return {
message: error?.detailedMessage '',
type: 'error',
};
},
queryOptions: { enabled: isApiEnabled },
});
return (
<Show
title={t('pages.customer.search.title')}
canEdit={false}
headerButtons={() => <div />}
>
<Form
className="mb-3"
layout="inline"
onFinish={() => {
if (
searchTerm === ''
searchTerm === undefined ||
searchTerm === null
) {
setIsApiEnabled(false);
} else {
setIsApiEnabled(true);
}
setButtonLoading(true);
setButtonLoading(false);
}}
>
<Form.Item
name="searchText"
className={w-64}
}
>
<Input
placeholder={'search by coinomId/emailId'}
onChange={(e) => setSearchTerm(e.target.value)}
allowClear
/>
</Form.Item>
<Button
htmlType="submit"
type="default"
shape={'round'}
icon={<SearchOutlined />}
loading={buttonLoading}
onClick={() => {
setSearchTerm(searchTerm);
}}
>
{t('buttons.search')}
</Button>
</Form>
<div></div>
</Show>8 Replies
Hi @amala. 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 provided extracts, it seems like you're trying to make an API call only when a button is clicked. In refine, you can achieve this by using the
useForm
or useTable
hooks with the onSearch
function. This function is called when the form is submitted, which can be triggered by a button click.
Here's an example of how you can use the onSearch
function with useForm
:
In this example, onFinish
is a function that is called when the form is submitted. The handleSubmit
function from useForm
is used to handle the form submission, and it takes onFinish
as a parameter. When the submit button is clicked, the form data is submitted and onFinish
is called.
For more information, you can check the following documentation pages:
- useForm hook (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/)
- useTable hook (https://refine.dev/docs/guides-concepts/tables/#search)
Please note that the provided code snippets are based on the information available in the extracts and may need to be adjusted to fit your specific use case.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@757969790017994843> kapa.ai is still learning and improving, please let us know how it did by reacting below
fascinating-indigo•10mo ago
@kapa.ai use antd form
Let me check the knowledge base for you. One moment! :books:
----------------------
To use Ant Design's
Form
with Refine, you can utilize the useForm
hook provided by Refine. This hook helps manage form data and integrates seamlessly with Ant Design's Form
component.
Here's an example of how you can use the useForm
hook with Ant Design's Form
:
In this example, useForm
is used to handle form data. The formProps
and saveButtonProps
properties are destructured from the useForm
hook and passed to the Form
and SaveButton
components, respectively. The formProps
property contains all the necessary properties for the form to handle the POST request for its data automatically, while the saveButtonProps
property handles the submission functionality of the form via the save button.
For more information, you can refer to the useForm hook documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@757969790017994843> kapa.ai is still learning and improving, please let us know how it did by reacting below
fascinating-indigo•10mo ago
@kapa.ai use ant d form with get api
Let me check the knowledge base for you. One moment! :books:
----------------------
In Refine, the
useForm
hook is primarily used for handling form data and submissions. It doesn't directly fetch data from an API. However, it can be used in conjunction with other hooks like useEffect
and fetch
API to retrieve data.
Here's an example of how you can use useForm
in a component that fetches data from an API using the fetch
API:
In this example, useForm
is used to handle form data, while useEffect
and fetch
are used to retrieve data from an API. The fetched data is stored in the data
state variable using the setData
function. The useEffect
hook with an empty dependency array []
ensures the data fetching only occurs once when the component mounts.
Please note that the useForm
hook is part of the Refine library, which is a framework for building data-intensive applications in React. It provides a lot of out-of-the-box functionality for rapid development, including form handling with useForm
.
For more information, you can refer to the useForm hook documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/).
Source: Discord support thread: useForm (https://discord.com/channels/837692625737613362/1160890494289715200)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@757969790017994843> kapa.ai is still learning and improving, please let us know how it did by reacting below