监听drawerList中字段值只会监听一次,同时如何实现drawerList中字段的联动
Closed this issue · 5 comments
africa1207 commented
1.依赖仓库的版本(Dependencies versions):
- react:18.2.0
- form-render:2.4.2
- table-render:
- antd:5.5.1
2.问题描述(Bug description):
- 现在需要实现drawer中输入框1和输入框2静态展示,选择下拉框时将下拉选项中的price字段赋值给输入框1,然后输入框2根据输入框1的值进行计算比如*10
- 这里也有个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 commented
lhbxs commented
是的,drawerList 这种模式比较特殊。弹窗里面其实是一个新的 FormRender 实例,只有在点击确定的时候才会进行数据同步,触发 watch
lhbxs commented
已修复
africa1207 commented
是的,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);
},
},
},
}