[RFC]Form support Form.Scope

[lemonied]

📋 RFC

Summary

问题：

• 在某些复杂的大表单场景中，表单代码通常要拆分成好几个组件，在有多层嵌套的后代组件中，想要拿到完整的NamePath并不容易，需要层层传递props；
• 只有Form.List可以向下传递NamePath，Form.List下的Item只能写成name={[field.name, 'name']}，写法很繁琐；

目的：

• 希望可以在Form的所有后代元素中，使用hook就可以拿到prefixName；
• 希望可以引入一个Scope的概念，即便不是Form.List也可以获得层级效果；

Example

希望可以这样使用：

import * as React from 'react';
import { Form, Input } from 'antd';

const ChildrenContent = () => {
  const { prefixName } = Form.useScope();
  const child = Form.useWatch([...prefixName!, 'child']);

  return (
    <>
      {/* 这里的name只写'child'即可，不需要写[field.name, 'child']，因为Form.Scope已经做了这件事 */}
      <Form.Item label="Children Content" name="child">
        <Input />
      </Form.Item>
      <Form.Item>child value: {child}</Form.Item>
      <Form.Item label="prefixName">{JSON.stringify(prefixName)}</Form.Item>
    </>
  );
};

export default () => (
  <Form
    layout="vertical"
    initialValues={{
      parent1: [
        {
          name: 'parent1',
          parent2: [
            {
              name: 'parent2',
            },
          ],
        },
      ],
    }}
  >
    <Form.List name="parent1">
      {(fields) =>
        fields.map((field) => (
          <div key={field.key}>
            <Form.Item label="parent1" name={[field.name, 'name']}>
              <Input />
            </Form.Item>
            <Form.List name={[field.name, 'parent2']}>
              {(fields2) => (
                <>
                  {
                    fields2.map((field2) => (
                      <div key={field2.key}>
                        <Form.Item label="parent2" name={[field2.name, 'name']}>
                          <Input />
                        </Form.Item>
                        <Form.Scope name={field2.name}>
                          <ChildrenContent />
                        </Form.Scope>
                      </div>
                    ))
                  }
                </>
              )}
            </Form.List>
          </div>
        ))
      }
    </Form.List>
  </Form>
);

[lemonied]

[zombieJ]

可以参考一下这个，直接写到 RFC 里哈：#37212

[zombieJ]

似乎 summary 和 例子不一样，更新一下？

[lemonied]

已修改

[zombieJ]

cc @ant-design/ant-design-collaborators

[zombieJ]

这里的 Form.Scope 的例子看起来有点松散，它似乎没有表现出自己 HOC 一个 FieldPathContext 的区别。看起来应该是（仅抛砖引玉）：

<Form.List name="users">
  {fields => (
    <MyField key={field.key} field={field} />
  )}
</Form.List>

MyField = () => {
  const parentPath = Form.useNamePath(); // users
  const myPath = [...parentPath, field.name]; // [users, number]
};

而对 FormItem，这个看起来抽象度还不够。如果是专门包一个 Form.Scope 还要提供 name 这个就很怪异。还要想想 Form.Item 下嵌套场景是否有更好的形式。

[lemonied]

不带。Form.Item 没有 scoped 参数会比较奇怪

这句是这个意思吗？

<Form.Item>
{
  (form) => {
    // 这里的form始终为标准form？
  }
}
</Form.Item>
// or
<Form.Item scoped>
{
  (form) => {
    // 这里拿到scopedForm？
  }
}
</Form.Item>

[zombieJ]

这个指的是 Form hooks 需要 scoped，但是 Form.Item 里却是不需要 <Form.Item scoped /> 会比较怪异。不过我倾向是 hooks 带 scope 标记就够了

[lemonied]

赞同

[zombieJ]

要不然先加个群？异步延迟有点严重。随便找一个 merged PR，里面有加群二维码。

[lemonied]

已加

[crazyair]

我目前是这样用的，

const List = (props: FormListProps) => {
    const { name } = props;
    const context = useContext(FieldContext);
    const { prefixName } = context;

    const fieldContext = useMemo(
        () => ({ ...context, prefixName: prefixName ? concat(prefixName, name) : name }),
        [context, name, prefixName]
    );

    return (
        <FieldContext.Provider value={fieldContext}>
            <Form.List {...props} />
        </FieldContext.Provider>
    );
};

export default List;


const { prefixName } = useContext(FieldContext);
const allName = prefixName ? concat(prefixName, name) : name;

[lemonied]

这样的确可以层层传递NamePath，但你这里的FieldContext貌似是为了传递NamePath专门写的？我觉得这样会增加开发者的使用成本；
FieldContext 本身是rc-field-form中的Provider，本身就有管理NamePath的能力，但antd并没有把他暴露出来，因此使用者在后代组件中难以获取prefixName ;

[lemonied]

antd中的依赖为：

{
  "rc-field-form": "~1.41.0",
}

开发者可以单独安装rc-field-form来获取FieldContext，但要非常小心版本问题，必须要兼容~1.41.0，稍有不慎就会出现多实例问题，我觉得antd至少要先把获取prefixName的方法暴露出来；

[afc163]

是不是提供一个 usePrefixNames 即可。

const prefixNames = Form.usePrefixNames();

...

return <Form.Item label="Children Content" name={[...prefixNames, 'child']}>;

[lemonied]

拿到prefixNames是我的第一个需求，针对这个需求，zombieJ提出的Form.useFormInstance({ scope: true })功能更全面一点；
第二个Form.Scope的需求尚未讨论出结果；