Reactjs 使用Ant Design验证父窗体中的嵌套组件窗体项

提交时，是否有办法从父窗体验证嵌套组件窗体项

下面是一个例子，我知道我可以用相同的形式处理这两个项目，这不是将数据从子组件传递到父组件的最佳方式（这只是一个简单的例子来说明我的问题）。我有一个比这个例子更复杂的情况

App.js

import React from "react";
import { FormComponentProps } from "antd/lib/form/Form";
import { Input, Form } from "ant";
import ChildComponent from "./ChildComponent";

function App() {
  const [state, setState] = React.useState("");
  const [childValue, setChildValue] = React.useState("");

  const handleSubmit = e => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        console.log(state);
        console.log(childValue);
      }
    });
  };

  const { getFieldDecorator } = props.form;

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Item
        label="Name"
        labelAlign="left"
        colon={false}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 14 }}
        required={false}
      >
        {getFieldDecorator("name", {
          rules: [
            {
              required: true
            }
          ]
        })(
          <Input
            type="text"
            name="Name"
            onChange={e => setState(e.target.value)}
          />
        )}
      </Form.Item>
      <ChildComponent setChildValue={setChildValue} />
    </Form>
  );
}

const WrappedApp = Form.create({ name: "App" })(App);
export default WrappedApp;

从“React”导入React；
从“antd/lib/form/form”导入{FormComponentProps}；
从“ant”导入{Input，Form}；
从“/ChildComponent”导入ChildComponent；
函数App（）{
const[state，setState]=React.useState（“”）；
const[childValue，setChildValue]=React.useState（“”）；
常量handleSubmit=e=>{
e、 预防默认值（）；
props.form.validateFields（（错误，值）=>{
如果（！err）{
console.log（状态）；
console.log（childValue）；
}
});
};
const{getFieldDecorator}=props.form；
返回(
{getFieldDecorator（“名称”{
规则：[
{
必填项：true
}
]
})(
设置状态（e.target.value）}
/>
)}
);
}
const WrappedApp=Form.create（{name:“App”}）（App）；
导出默认WrappedApp；

ChildComponent.js

import React, { useEffect } from "react";
import { Input, Form } from "antd";

function ChildComponent(props) {
  const [state, setState] = React.useState("");
  useEffect(() => {
    props.setChildValue(state);
  }, [state]);

  const { getFieldDecorator } = props.form;
  return (
    <Form.Item
      label="Last"
      labelAlign="left"
      colon={false}
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 14 }}
      required={false}
    >
      {getFieldDecorator("last", {
        rules: [
          {
            required: true
          }
        ]
      })(
        <Input
          type="text"
          name="Last"
          onChange={e => setState(e.target.value)}
        />
      )}
    </Form.Item>
  );
}
export default ChildComponent;

import React，{useffect}来自“React”；
从“antd”导入{Input，Form}；
功能组件（道具）{
const[state，setState]=React.useState（“”）；
useffect（（）=>{
props.setChildValue（状态）；
}，[州]；
const{getFieldDecorator}=props.form；
返回(
{getFieldDecorator（“last”{
规则：[
{
必填项：true
}
]
})(
设置状态（e.target.value）}
/>
)}
);
}
导出默认子组件；

当我从App.js提交表单时，我还想检查ChildComponent.js中项目的验证。 是否有一种方法可以从App.js表单传递引用以验证ChildComponent中的项

附言。

---

我已经尝试将

props.form

从App.js传递到ChildComponent.js。它没有检查ChildComponent项的验证

是的，首先不要在非受控表单上使用

onChange

，其次，您可以使用

id

名称（如

“last”

）进行验证，您可以在文档中看到示例。是的，首先不要在非受控表单上使用

onChange

，其次，您可以使用

id

名称（如

“last”

）进行验证，您可以在文档中看到示例。