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表單對應的值也對應刷新、複寫，刪除時做以下操作：

好啦～今日分享就到這裏了，有更優解決方案敬請提出～