javascript - Antd 的其他包的 getFieldDecorator

Question

我想集成 react-mapbox-autocomplete使用 Antd 的 getFieldDecorator。

但是Antd的getFieldDecorator好像只支持自己的组件。

有没有办法将它用于其他包，如 react-map-autocomplete？

Answer 1

是的，可以让 getFieldDecorator 与每个不是 antd 组件的自定义组件一起工作。

如文档中所述，您需要使用 getFieldDecorator 中的 injected Prop .

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.

由于这是一个非常常见的问题，下面是一些生产代码示例:

这里我们使用自定义组件 SliderNumber 和 getFieldDecorator。

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

在它的实现中，我们使用 getFieldDecorator 注入(inject)的 onChange 和 value。

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>
  );
});

请注意，有时只使用 ref 而不像上面那样实现 onChange 会更容易。