alibaba/x-render

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

Closed this issue · 5 comments

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

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

已修复

是的,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);
                },
              },
            },
          }