Question

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

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

是否可以将其用于其他react-map-autocomplete包？

Answer 1

是的，可以使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。

Antd的getFieldDecorator用于其他软件包

1 个答案: