怎么进行外部控制？

我们提供了 ref 的方式，可以通过 ref 的方式来获取到表单的实例，然后通过实例的方法来进行外部控制。

• 包括设计器本身函数、属性、事件、数据等等。
• 如果需要获取表单中设置的额外数据，可以通过表单的 ctx.outInfo 函数来获取。

代码示例

import { useRef } from "react";
import { IFormRenderRef } from "@formdeep/pages/Runtime/FormRender";
function Form() {
  const formRenderRef = useRef<IFormRenderRef | null>(null);

  const onGetValue = async () => {
    // 取值
    console.log(formRenderRef.current.api.getValue());
    // 获取instance
    console.log(
      formRenderRef.current.api.getInstance("flow_purchase_product.name")
    );
  };

  const onSubmit = async () => {
    // 提交
    const data = await formRenderRef.current.submit();
    console.log(data);
  };

  return (
    <>
      <FormRender ref={formRenderRef} schema={schema} />
      <button onClick={onSubmit}>提交</button>
      <button onClick={onGetValue}>取值</button>
    </>
  );
}