Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

监听drawerList中字段值只会监听一次,同时如何实现drawerList中字段的联动 #1495

Closed
africa1207 opened this issue Mar 11, 2024 · 5 comments
Assignees
Labels

Comments

@africa1207
Copy link

africa1207 commented Mar 11, 2024

1.依赖仓库的版本(Dependencies versions)

  • react:18.2.0
  • form-render:2.4.2
  • table-render:
  • antd:5.5.1

2.问题描述(Bug description)

  1. 现在需要实现drawer中输入框1和输入框2静态展示,选择下拉框时将下拉选项中的price字段赋值给输入框1,然后输入框2根据输入框1的值进行计算比如*10
  2. 这里也有个bug,监听'list[].select1'的时候,只有第一次会打印,后续不会打印,如果我将drawerList改成tableList改变下拉框的值就能随时打印
    3.出现问题的 schema demo(Reproduction schema demo)
const form = useForm();
  const schema = {
    type: 'object',
    displayType: 'row',
    properties: {
      list: {
        title: '对象数组',
        type: 'array',
        widget: 'drawerList',
        items: {
          type: 'object',
          properties: {
            input1: {
              title: '输入框1',
              type: 'number',
              required: true,
              readOnly: true,
            },
            input2: {
              title: '输入框2',
              type: 'number',
              required: true,
              readOnly: true,
            },
            select1: {
              title: '单选',
              type: 'string',
              widget: 'select',
              props: {
                options: [
                  {
                    label: '选项a',
                    value: 'a',
                    price: 100,
                  },
                  {
                    label: '选项b',
                    value: 'b',
                    price: 200,
                  },
                  {
                    label: '选项c',
                    value: 'c',
                    price: 300,
                  },
                ],
              },
            },
          },
        },
      },
    },
  };

  const watch = {
    'list[].select1': (value, indexList) => {
      console.log('value', value);
      console.log('indexList', indexList);
    },
  };

  const onFinish = (formData) => {
    console.log('formData:', formData);
  };

  return (
    <FormRender
      form={form}
      schema={schema}
      // @ts-ignore
      watch={watch}
      onFinish={onFinish}
      footer={true}
    />
  );

4.最小复现 demo(Reproduction demo)
https://codesandbox.io/p/sandbox/xrender-demo-qcpjng

@africa1207 africa1207 changed the title 如何实现drawList中字段的联动 监听drawerList中字段值只会监听一次,同时如何实现drawerList中字段的联动 Mar 12, 2024
@africa1207
Copy link
Author

呼叫大佬@lhbxs @siyi98 @tw93

@lhbxs
Copy link
Collaborator

lhbxs commented Mar 23, 2024

是的,drawerList 这种模式比较特殊。弹窗里面其实是一个新的 FormRender 实例,只有在点击确定的时候才会进行数据同步,触发 watch

@lhbxs lhbxs added 👑 featrue form form-render labels Mar 23, 2024
@lhbxs
Copy link
Collaborator

lhbxs commented Mar 23, 2024

#1504

@lhbxs
Copy link
Collaborator

lhbxs commented Mar 23, 2024

已修复

@lhbxs lhbxs closed this as completed Mar 23, 2024
@africa1207
Copy link
Author

africa1207 commented Mar 25, 2024

是的,drawerList 这种模式比较特殊。弹窗里面其实是一个新的 FormRender 实例,只有在点击确定的时候才会进行数据同步,触发 watch

@lhbxs 你好,那我如何实现drawerList中的字段联动呢如描述中将选中项的price字段赋值给input1

 const watch = {
    "list[].select1": (value, indexList) => {
      console.log("value", value);
      console.log("indexList", indexList);
      // 无效
      form.setValueByPath(`list[${indexList[0]}].input1`, 123); 
      // 无效
       form.setValueByPath(`list[].input1`, 123); 
    },
  };

我直接在select的onChange中也不行

select1: {
              title: "单选",
              type: "string",
              widget: "select",
              props: {
                options: [
                  {
                    label: "选项a",
                    value: "a",
                    price: 100,
                  },
                  {
                    label: "选项b",
                    value: "b",
                    price: 200,
                  },
                  {
                    label: "选项c",
                    value: "c",
                    price: 300,
                  },
                ],
                onChange: (value, _) => {
                  form.setValueByPath("list[].input1", _.price);
                },
              },
            },
          }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants