Проверка вложенного элемента формы компонента из родительской формы с помощью Ant Design - PullRequest
Новая
       8

Проверка вложенного элемента формы компонента из родительской формы с помощью Ant Design

0 голосов
/ 05 февраля 2020

Есть ли способ проверить вложенный элемент формы компонента из его родительской формы при отправке?

Вот пример, Я знаю, что мог бы обрабатывать оба элемента в одной и той же форме, и это не лучший способ передачи данных от дочернего к родительскому компоненту (Это простой пример, иллюстрирующий мой вопрос). У меня более сложная ситуация, чем в этом примере. .

Приложение. 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;

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;

Когда я отправить форму из приложения. js, я также хочу проверить валидацию элемента из ChildComponent. js. Есть ли способ передать ссылку из формы приложения js для проверки элемента в ChildComponent?

Ps Я пытался передать props.form из приложения. js в ChildComponent. js. Он не проверял проверку для элемента ChildComponent.

...