CODEWITHSUNDEEP
javascriptreactjsantd
Kinji
Kinji

Reputation: 51

Antd's getFieldDecorator for other packages

I'd like to integrate react-mapbox-autocomplete with Antd's getFieldDecorator.

But it seems to Antd's getFieldDecorator only support for their own components.

Is there any way to use it for other packages like react-map-autocomplete?

Upvotes: 2

Views: 243

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53894

Yes, it is possible to make getFieldDecorator to work with every custom component that is not an antd component.

As mentioned in the docs, you need to use the injected props from getFieldDecorator.

After wrapped by getFieldDecorator, value(or other property defined by valuePropName) onChange(or other property defined by trigger) props will be added to form controls.

As this is a very common question, here is some production code example:

Here we use a custom component SliderNumber with getFieldDecorator.

<Form.Item label={TOLERANCE.label}>
  {getFieldDecorator(TOLERANCE.field)(<SliderNumber />)}
</Form.Item>

And within its implementation, we use the injected onChange and value from getFieldDecorator.

const SliderNumber = forwardRef(({ onChange, value: initial }, ref) => {
  const [value, setValue] = useState(initial);

  useEffect(() => {
    onChange(value);
  }, [onChange, value]);

  return (
    <FlexBox>
      <FlexBox.Item span={SPAN}>
        <Slider value={value} onChange={setValue} />
      </FlexBox.Item>
      <FlexBox.Item span={SPAN_REST}>
        <InputNumber value={value} onChange={setValue} />
      </FlexBox.Item>
    </FlexBox>
  );
});

Note that sometimes it is easier to just use ref without implementing the onChange like above.

Upvotes: 2

Related Questions