Ant Design 提供了一个动态表单项,通过使用它,我可以添加和删除多个字段。但现在我想嵌套其中,即我想创建一个类似调查表的表单,在其中我想添加多个问题及其各自的答案。
目前,当我添加问题时,它工作正常,但当我添加一个问题的答案时,它也会添加到所有问题中。
添加和删除问题和答案的功能如下:
remove = k => {
const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue("keys");
// We need at least one passenger
if (keys.length === 1) {
return;
}
// can use data-binding to set
form.setFieldsValue({
keys: keys.filter(key => key !== k)
});
};
add = () => {
const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue("keys");
const nextKeys = keys.concat(uuid);
uuid++;
// can use data-binding to set
// important! notify form to detect changes
form.setFieldsValue({
keys: nextKeys
});
};
remove1 = k1 => {
const { form } = this.props;
// can use data-binding to get
const keys1 = form.getFieldValue("keys1");
// We need at least one passenger
if (keys1.length === 1) {
return;
}
// can use data-binding to set
form.setFieldsValue({
keys: keys1.filter(key1 => key1 !== k1)
});
};
add1 = () => {
const { form } = this.props;
// can use data-binding to get
const keys1 = form.getFieldValue("keys1");
const nextKeys1 = keys1.concat(uuid1);
uuid1++;
// can use data-binding to set
// important! notify form to detect changes
form.setFieldsValue({
keys1: nextKeys1
});
};
I have 在codesandbox.io上创建了一个演示.
问题不在于函数,而在于 getFieldDecorator:
<FormItem>
{getFieldDecorator(`answer[${k}]`, {
validate: [
...
]
})(<Input type="" placeholder=" Enter Answer" />)
您为所有输入提交相同的输入值。
如果没有装饰器,它可以正常工作,您可以对自定义函数进行验证并调用它
<FormItem>
<Input
type=""
placeholder=" Enter Answer"
// value={this.state.answer}
// onChange={e => this.handleChange(e)}
/>
</FormItem>
UPD:添加了完整的代码 -沙盒尝试
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)