时间戳

首页 > 解决方案 > Antd 对其他包的 getFieldDecorator

javascript - Antd 对其他包的 getFieldDecorator

问题描述

我想将react-mapbox-autocomplete与 Antd 的getFieldDecorator.

但是似乎Antd的getFieldDecorator只支持自己的组件。

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

标签： javascriptreactjsantd

解决方案

是的，可以getFieldDecorator使用每个不是组件的自定义antd组件。

如文档中所述，您需要使用从getFieldDecorator.

被 getFieldDecorator 包裹后，表单控件中会添加 value(或 valuePropName 定义的其他属性) onChange(或 trigger 定义的其他属性) props。

由于这是一个非常常见的问题，这里有一些生产代码示例：

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

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

在其实现中，我们使用注入的onChange和valuefrom 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>
  );
});

ref请注意，有时在不实现上述类似的情况下使用起来会更容易onChange。

推荐阅读