reactjs - 如何使用 Ant Design 创建问卷类型的表单?
问题描述
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
});
};
解决方案
问题不在于函数,而在于 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:添加了完整代码 -沙盒尝试
推荐阅读
- django - 如何在没有模型的模板中从视图中渲染表单?
- sql - SQL 服务(im Wamp)无法在 Windows 10 Pc 中启动
- python - 如何将上下文从向导传递到控制器并在 Odoo 12 的控制器中获取该上下文的值?
- yii2 - 阻止用户从 URL 切换
- python - 如果按钮只有类型和值,如何使用 Python 在 Web 表单上提交数据
- javascript - 在第二个 await -Async/await 之前等待第一个 await 完成
- mysql - 使用子查询连接表
- android - 使用 ARCore 添加文本视图
- go - go-cmp 在比较 2 个结构时将空接口值视为 int 和 flat64
- opencl - OpenCL:不同队列中的相同内核