React native 使用ant design表单嵌套后外层拿内层的数据方法

在React Native中使用Ant Design的Form组件处理嵌套的表单时，如果你想在外层组件中获取内层表单的数据，你可以通过使用formRef和onFinish回调来实现。

以下是一个示例代码，演示如何在外层组件中获取内层表单的数据：

import React, { useRef } from 'react';
import { View, Button } from 'react-native';
import { Form, Input } from 'antd';

const OuterForm = () => {
  const formRef = useRef();
  const innerFormRef = useRef();

  const handleOuterFormSubmit = () => {
    const innerFormData = innerFormRef.current.getFieldsValue();
    console.log('Inner Form Data:', innerFormData);
  };

  const handleInnerFormSubmit = (values) => {
    console.log('Inner Form Submit:', values);
  };

  return (
    <View>
      <Form
        ref={formRef}
        onFinish={handleOuterFormSubmit}
      >
        <Form.Item name="outerField">
          <Input placeholder="Outer Field" />
        </Form.Item>

        <InnerForm ref={innerFormRef} onFinish={handleInnerFormSubmit} />

        <Form.Item>
          <Button title="Outer Submit" onPress={() => formRef.current.submit()} />
        </Form.Item>
      </Form>
    </View>
  );
};

const InnerForm = React.forwardRef((props, ref) => {
  const [form] = Form.useForm();

  React.useImperativeHandle(ref, () => ({
    getFieldsValue: form.getFieldsValue
  }));

  return (
    <Form form={form} onFinish={props.onFinish}>
      <Form.Item name="innerField">
        <Input placeholder="Inner Field" />
      </Form.Item>

      <Form.Item>
        <Button title="Inner Submit" onPress={form.submit} />
      </Form.Item>
    </Form>
  );
});

export default OuterForm;
           

在上述代码中，我们创建了一个外层表单OuterForm，并使用useRef来创建formRef和innerFormRef引用。

在外层表单的提交函数handleOuterFormSubmit中，我们通过innerFormRef.current.getFieldsValue()来获取内层表单的数据，并在控制台打印出来。

在内层表单的InnerForm组件中，我们使用React.forwardRef来将ref传递给内层表单组件。通过React.useImperativeHandle可以将getFieldsValue方法暴露给外层组件，以便外层组件可以通过innerFormRef.current.getFieldsValue()来获取内层表单的数据。

在外层表单的提交按钮和内层表单的提交按钮上，我们分别使用formRef.current.submit()和form.submit来触发表单的提交操作。

通过这种方式，你可以在外层组件中获取内层表单的数据，以实现更复杂的表单提交需求。