exotic-emerald•2y ago

Custom Component with FormItem

❓ Issue I met I try to custom a component with Select & useSelect But it only works fine with origin Select , doesn't work at all with mine component ℹ️ info 1. import { Select, useSelect } from "@pankod/refine-antd"; 2. please check the pics

7 Replies

correct-apricot•2y ago

Hey @劉哲宇, You can check out custom form controls components on Ant Design documentation: https://ant.design/components/form#components-form-demo-customized-form-controls

exotic-emerald•2y ago

@salihozdemir appreciate Umm..., I read it I've used ant design Form, and I know how to use them. . Just wondering, do Refine do some magic things on Form component in @pankod/refine-antd In past, I have to use Form.getFieldValues then set the defaultValue by myself But I found Refine doesn't do so.

correct-apricot•2y ago

refine just export the Form component without any magic. However, useForm provides some useful props to Form component. When i review your custom component, I didin't see value and onChange props. Form.Items pass these props to its child component. If you want to change your form values, you should handle these values on your custom component.

exotic-emerald•2y ago

I've resolved this these are what I did: 1. get form form formProps 2. pass form to mine component, 3. use form.setFieldValue onChange etc... by doing this, I can update form data correctly

correct-apricot•2y ago

Good solution, thank you for the share 🤙🏻 By the way, something caught my attention. You created custom component to format Select options. Good news, useSelect hook already support this so, you don't need to create a custom component for this. You can checkout this: https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/#optionlabel-and-optionvalue All you have to do is as follows:

const { options } = useSelect({
    resource: "your-resource",
    optionLabel: "name",
    optionValue: "id",
});

const { options } = useSelect({
    resource: "your-resource",
    optionLabel: "name",
    optionValue: "id",
});

exotic-emerald•2y ago

OMG, really I did not notice Refine has optionLabel & optionValue There's no need to reinvent component Appreciate for kindly help 😀 -- BTW options is inside selectProps (as pic) so the example on website might be wrong

correct-apricot•2y ago

Oops, you're right. We have decided to re-write all documents, we will fix them as soon as possible 🚀 Thanks for your feedback 🎉