[Form] Form组件动态表单FormList无法通过setFieldsValue手动设置表单联动值

[yangshuo-commits]

这个功能解决了什么问题

实际需求：图中动态表单选中字段名时需要联动带出字段名称、字段值 目前使用setFieldValue无效果 可能是因为没有接收表单索引无法定位到某一行的formItem上

你建议的方案是什么

建议 1、setFieldsValue中加上索引参数 2、 在FormList中增加透穿出一个set方法 用于设置当前行表单数据

[github-actions[bot]]

👋 @yangshuo-commits，感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[github-actions[bot]]

♥️ 有劳 @ximendatie @cuijinyu @HQ-Lin @BaoTao1997 @yume316 尽快确认问题。 确认有效后将下一步计划和可能需要的时间回复给 @yangshuo-commits 。

[honkinglin]

方便给个在线stackblitz 在线demo排查下吗

[yangshuo-commits]

https://stackblitz.com/edit/react-rbxsn8?file=src%2Fdemo.jsx

[HaixingOoO]

@yangshuo-commits 你好，setFieldsValue是可以手动设置表单联动值的，你的问题解决了吗？😊

[legend91325]

https://stackblitz.com/edit/react-rbxsn8?file=src%2Fdemo.jsx

提供的demo 确实不生效 ，请问这个问题如何解决，我也遇到了类似问题 @HaixingOoO

[HaixingOoO]

https://stackblitz.com/edit/react-rbxsn8?file=src%2Fdemo.jsx

提供的demo 确实不生效 ，请问这个问题如何解决，我也遇到了类似问题 @HaixingOoO

可能之前沒提供Demo給你們，現在你再試試看

• stackblitz. Demo

[legend91325]

https://stackblitz.com/edit/react-rbxsn8?file=src%2Fdemo.jsx 提供的demo 确实不生效 ，请问这个问题如何解决，我也遇到了类似问题 @HaixingOoO

可能之前沒提供Demo給你們，現在你再試試看

• stackblitz. Demo

多谢 看了这个demo 懂了如何写了， 建议将此demo 维护到官网文档里

[legend91325]

@HaixingOoO 我现在赋值这个可以搞定了，但是还有个联动问题 ，FormList 中 我有两个Select 下拉框，我想根据第一个下拉框的值，去动态设置 第二个下拉框里面的选项，请问这种如何实现？是通过 setFields 吗？

[HaixingOoO]

@HaixingOoO 我现在赋值这个可以搞定了，但是还有个联动问题 ，FormList 中 我有两个Select 下拉框，我想根据第一个下拉框的值，去动态设置 第二个下拉框里面的选项，请问这种如何实现？是通过 setFields 吗？

你说的动态设置第二个下拉框的里面的选项值是吧？那就要看你的选项值是动态(接口请求的)，还是静态的有几种数据的options？

[legend91325]

“

   <Form form={form} onSubmit={onSubmit}>

      <FormList name='kafkaAlertConfigs'>

        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }, index) => (
              <FormItem key={key}>
                <FormItem
                  {...restField}
                  name={[name, 'kafkaClusterId']}
                  label='Kafka集群'
                  rules={[{ required: true, type: 'error' }]}
                >
                  <Select options={kafkaClusterOption} onChange={(e) => clusterOnChange(e, index)}></Select>
                </FormItem>
                <FormItem
                  {...restField}
                  name={`${name}_topic`}
                  label='Topic'
                  rules={[{ required: true, type: 'error' }]}
                >
                  <Select></Select>
                </FormItem>
                <FormItem
                  {...restField}
                  name={[name, 'alertRuleType']}
                  label='监控规则'
                  rules={[{ required: true, type: 'error' }]}
                >
                  <Select options={KAFKA_RULE_TYPE_OPTIONS}></Select>
                </FormItem>

                <FormItem>
                  <MinusCircleIcon size='20px' style={{ cursor: 'pointer' }} onClick={() => remove(name)} />
                </FormItem>
              </FormItem>
            ))}
            <FormItem style={{ marginLeft: 100 }}>
              <Button theme='default' variant='dashed' onClick={() => add()}>
                Add field
              </Button>
            </FormItem>
          </>
        )}
      </FormList>
      <FormItem style={{ marginLeft: 100 }}>
        <Button type='submit' theme='primary'>
          提交
        </Button>
        <Button type='reset' style={{ marginLeft: 12 }}>
          重置
        </Button>
      </FormItem>
    </Form>

”

我想动态设置topic select 的值，这个值我已经通过Map 类型 存储在state中了， 根据选择的 kafkaClusterId 值就可以获取， 现在不清楚如何动态设置 对应行的 topic select options 选项

[HaixingOoO]

声明个topic select options变量，重新赋值topic select options咯

[legend91325]

我是动态多行哈，我只想单独一行的值 随着对应的 结果改变

[HaixingOoO]

在线 Demo

@legend91325 您可以试试这个，然后我先说明，setFileds不会重新刷新页面，所以我这个使页面Rerender了，不过你要的功能已经实现，然后就是多的话，里面每行都会执行一遍，希望能帮到你啊！！！

[legend91325]

十分感谢

[HaixingOoO]

十分感谢

完善的在線Demo 我完善了一下，你再看看這個吧！！！