Form表单数组字段增删问题
- 场景还原
在我们做表单这块的时候可能会遇到以下原型：
表单中其中一个字段是个数组，数组的每一项是个对象，可能有多个字段，且支持删除和新增。
那么问题来了，这种情况，我们如何设计数据结构、如何设计我们的Form表单？
- 实现动态增删效果
<FormItem
{...formItemLayout}
// required
label="字段匹配"
>
{(dataId ? (currentData && currentData.columns ? currentData.columns : []) : columns).map((rule, index) => {
let ruleKeys = `columns[${index}]`;
return (
<div style={{ marginBottom: 15 }} key={`columns-${index}`}>
<FormItem
style={{
display: 'inline-block',
width: 100,
marginBottom: 0,
marginRight: 10
}}
>
{
getFieldDecorator(`${ruleKeys}.condition`, {
initialValue: rule ? rule.condition : 0,
rules: [{ required: !form.getFieldValue(`${ruleKeys}.column`) ? false : true, message: '请选择条件!' }],
})(
<Select disabled={isView} placeholder="请选择条件" style={{ width: 100, marginRight: 10, display: "inline-block" }} >
<Option key={-1} value="">请选择</Option>
<Option key={0} value={"0"}>包含</Option>
<Option key={1} value={"1"}>不包含</Option>
</Select>
)}
</FormItem>
<FormItem
style={{
display: 'inline-block',
width: 150,
}}
>
{getFieldDecorator(`${ruleKeys}.column`, {
initialValue: rule ? rule.column : '',
rules: [
{
required: !form.getFieldValue(`${ruleKeys}.condition`) ? false : true,
message: '请输入字段名!'
}
// {validator: this.vaildColumn}
]
})(
<Input placeholder="请输入字段" style={{ width: 140, marginRight: 10, display: "inline-block" }} disabled={isView} />
)}
</FormItem>
{index == 0 ?
<div style={{ display: 'inline-block', marginTop: '5px' }} className="f-fr">
<Icon className="f-fr"
onClick={this.addRules}
style={{ marginLeft: '5px', marginTop: '7px', fontSize: '16px' }}
type="plus-circle-o" />
<Tooltip title="字段">
<Icon className="f-fr"
// onClick={this.addRules}
style={{ marginTop: '7px', fontSize: '16px' }}
type="question-circle-o" />
</Tooltip>
</div> :
<Icon className="f-fr"
onClick={this.deleteRules.bind(this, index)}
style={{ marginTop: '7px', fontSize: '16px', marginTop: '11px' }}
type="minus-circle-o" />
}
</div>
)
})}
</FormItem>
用一个数组去存当前这个字段，此数组叫“columns”，数组的每一项里的字段名为“columns[k][字段名]”，例如“columns[k].condition”，最后Form会将数据全都按照格式存入对应字段，结构如下：
新增按钮就对应插入一个字段节点为空的对象：
删除同样找到对应的index，删除该index对应的那一项：
但是，
请注意，我发现之前很多代码会有这个问题，只是从数据层面上删除了，但是从界面上看到的是删除了最后一个，并没有删除对应项，造成这个问题的原因是，我们没有将界面也进行对应的整理。
点击“word2”后面的删除后，变成下图：
这样展示上肯定是有问题的，解决办法是，将Form表单对应的值也对应刷新、复写，删除时做以下操作：
好啦～今日分享就到这里了，有更优解决方案敬请提出～