Form表单数组字段增删问题

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表单对应的值也对应刷新、复写，删除时做以下操作：

好啦～今日分享就到这里了，有更优解决方案敬请提出～