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![No description](https://cdn.answeroverflow.com/1067665648945205258/SCR-20230125-hh9.png)
![No description](https://cdn.answeroverflow.com/1067665649217839196/SCR-20230125-hdq.png)
![No description](https://cdn.answeroverflow.com/1067665649461121064/SCR-20230125-hg3.png)
7 Replies
extended-salmon•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
conscious-sapphire•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.extended-salmon•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.conscious-sapphire•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 correctlyextended-salmon•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:
conscious-sapphire•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![No description](https://cdn.answeroverflow.com/1067759567712301057/e2f7f2935ea7636e.png)
extended-salmon•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 🎉