如何在ant design Framework中从parent中调用child组件中表单的onFinish方法

Question

所以我有一个包装器 parent 组件，它设置应用程序的布局、菜单，还有一个保存按钮。 Child 组件根据路由渲染（目前只有 2-3 个）。

我正在开发 SAVE 按钮位置固定的东西（在 parent 组件中），每当按下保存按钮时，它应该执行 child 组件的保存方法.

我现在可以使用 refs 从 parent 调用 child 方法（寻找更好的解决方案），但后来我失去了 onFininsh 由 ANT Design Form 提供的功能，因此会丢失所有验证、表单项的值和其他有用的功能。

这是我的Parent。

class Layout extends React.Component {
  constructor(props) {
    super(props);
    this.child = React.createRef();
   }
   render() {
       return(
           <button onClick = {this.child.current.save }>Save</button>
           <Two ref={this.child} />
        )
    }
}

这是我的child

const ChildComponent = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    save() {
      alert("Child Function Called");
    },
  }));

  function saveData(values) {
   // How to execute this function from parent
   } 

   return (
       <Form
          form={form}
          {...formItemLayout}
          // onFinishFailed={finishFailed}
          onFinish={saveData}
          >
            -----
            ----
        </Form>
     )
})

我可以从 child 组件的保存功能中获取警报。此外，两个组件之间还有一个路由器。这可能不是最好的方法，也可能不是反反应方法，但尝试或学习任何新东西都没有坏处。

Answer 1

是的，还是有可能的。使用 Form API docs，有一个公开的 submit 方法可供您调用。它将验证字段，因此也无需调用 validateFields。

无需创建自定义 save 方法，因为 submit 可以完成这项工作。问题是你必须将 ref 传递给 Form 组件。

class Layout extends React.Component {
  constructor(props) {
    super(props);
    this.child = React.createRef();
  }
  render() {
    return (
      <>
        <button onClick={() => this.child.current.submit()}>Save</button>
        <DemoForm ref={this.child} />
      </>
    );
  }
}

const DemoForm = forwardRef((props, ref) => {
  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      ref={ref}
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        name="remember"
        valuePropName="checked"
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
});

DEMO

如何在ant design Framework中从parent中调用child组件中表单的onFinish方法

How to call onFinish method of form in child component from parent in ant design framework

javascript

reactjs

antd