javascript - Antd的getFieldDecorator用于其他软件包

我想将react-mapbox-autocomplete与Antd的getFieldDecorator集成在一起。

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

有什么办法可以将其用于react-map-autocomplete之类的其他软件包吗？

最佳答案

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

如文档中所述，您需要使用getFieldDecorator中注入的道具。


  由getFieldDecorator包装后，会将value（或valuePropName定义的其他属性）onChange（或触发器定义的其他属性）道具添加到窗体控件中。


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

在这里，我们将自定义组件SliderNumber与getFieldDecorator一起使用。

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

在其实现中，我们使用从onChange注入的value和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会更容易。