ant design中的Form.List 如何支持dependencies

1、单个

官网例子:打开
需要注意区分shouldUpdate

2、多个Form.List

<Form name="dynamic_form_nest_item" onFinish={ onFinish } autoComplete="off">
  <Form.List name="users">
    { ( fields, { add, remove } ) => (
      <>
        { fields.map( ( field ) => (
          <Space
            key={ field.key }
            style={ { display: "flex", marginBottom: 8 } }
            align="baseline"
          >
            <Form.Item
              { ...field }
              name={ [ field.name, "name" ] }
              fieldKey={ [ field.fieldKey, "name" ] }
              dependencies={[["users", 0, "age"]]}

              rules={ [
                {
                  required: true,
                  message: "name"
                }
              ] }
            >
              <Input placeholder="Name"/>
            </Form.Item>
            <Form.Item
              { ...field }
              name={ [ field.name, "age" ] }
              fieldKey={ [ field.fieldKey, "age" ] }
              dependencies={[["users", 0, "name"]]}
              rules={ [
                {
                  required: true,
                  message: "age"
                },
                ( { getFieldValue } ) => ( {
                  validator( _, value ) {
                    console.log( "name" );
                    if (
                      !value ||
                      getFieldValue( "users" )[field.fieldKey].name.length <
                      value.length
                    ) {
                      return Promise.resolve();
                    }

                    return Promise.reject(
                      "the length of the name is less than the length of the age"
                    );
                  }
                } )
              ] }
            >
              <Input placeholder="age"/>
            </Form.Item>
            <MinusCircleOutlined onClick={ () => remove( field.name ) }/>
          </Space>
        ) ) }
        <Form.Item>
          <Button
            type="dashed"
            onClick={ () => add() }
            block
            icon={ <PlusOutlined/> }
          >
            Add field
          </Button>
        </Form.Item>
      </>
    ) }
  </Form.List>
</Form>
  • 解释:

dependencies={[["users", 0, "name"]]}
users:Form.List的name
0:第几行
name:依赖的参数

参考链接:在线demo
链接1、来自github的issues
链接2、https://ant.design/components/form-cn/#dependencies

你可能感兴趣的:(ant.design)