react+antd動(dòng)態(tài)增刪表單方式

更新時(shí)間：2024年01月03日 09:58:31 作者：趙乘風(fēng)_i

這篇文章主要介紹了react+antd動(dòng)態(tài)增刪表單方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

功能

需要對(duì)多個(gè)Input組成的list可以新增和刪除

在之前的文章 react 涉及的增加，刪除list ，我說(shuō)不可以使用 index 來(lái)做刪除，就使用了給每個(gè) list 添加 selfId 的方式來(lái)實(shí)現(xiàn)刪除。

然而事實(shí)是可以使用 index 來(lái)進(jìn)行刪除操作的。

當(dāng)年我才疏學(xué)淺，沒有g(shù)et到高級(jí)玩法，使用selfId這樣的實(shí)現(xiàn)，無(wú)疑就是對(duì)數(shù)據(jù)過(guò)度操作了，所以學(xué)習(xí)了新的使用方法，實(shí)現(xiàn)如下：

技術(shù)棧： react hooks + antd Form

實(shí)現(xiàn)原理

其實(shí)新增還是不變的，在list后新增一個(gè)空對(duì)象，讓其多一條數(shù)據(jù)，再重新渲染。

刪除有所改變，首先，form 表單的 key, 學(xué)習(xí)官方的demo，經(jīng)過(guò)一番改良，

使用 data.0.name1 這樣的格式作為某個(gè)表單的 key, 那么根據(jù)form的機(jī)制，會(huì)自動(dòng)產(chǎn)生

data: [{name1: 'xx'}] 這樣的數(shù)據(jù)格式，所以剛好也不用我們?cè)俅翁幚砹恕?/p>

然后說(shuō)回刪除

// 獲取當(dāng)前的所有表單值
const lists = getFieldValue(formTitle);
// 刪除后替換
for (let index in lists) {
  const nIndex = Number(index);
  if (nIndex >= i && lists[nIndex + 1]) {
    formData.map(item => setFieldsValue({[`${formTitle}.${nIndex}.${item}`]: lists[nIndex + 1][item]}));
  }
}
// 刪除數(shù)組數(shù)據(jù)
setDetail([...detail.slice(0, i), ...detail.slice(i, detail.length - 1)]);

再來(lái)詳細(xì)說(shuō)一下：

1、獲取當(dāng)前的所有表單值，是為了等會(huì)執(zhí)行表單替換

2、循環(huán)這個(gè)表單list值，再找出刪除的這個(gè)index，然后把后面的表單重新賦值，往前移動(dòng)一個(gè)

3、刪除一個(gè)數(shù)組的長(zhǎng)度

整體實(shí)現(xiàn)

import React, { Fragment } from 'react';
import { Form, Input, Radio, Icon, message, Button } from 'antd';

const { TextArea } = Input;
const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 16 },
};

const FormItemList = (props) => {
  const { form } = props;
  const { getFieldDecorator, getFieldValue, setFieldsValue } = form;

  const [detail, setDetail] = React.useState([]);

  const formData = ['name1', 'name2', 'name3', 'name4'];
  const formTitle = 'data';

  React.useEffect(() => {
    setDetail(data)
  }, []);

  const deleteOne = (i) => {
    const lists = getFieldValue(formTitle);
    for (let index in lists) {
      const nIndex = Number(index);
      if (nIndex >= i && lists[nIndex + 1]) {
        formData.map(item => setFieldsValue({[`${formTitle}.${nIndex}.${item}`]: lists[nIndex + 1][item]}));
      }
    }
    setDetail([...detail.slice(0, i), ...detail.slice(i, detail.length - 1)]);
  }

  const newItem = () => {
    setDetail([...detail, {}]);
  };
  
  return (
    <Fragment>
      {detail.map((item, index) => (
        <div style={{ background: '#eee', position: 'relative', marginBottom: 10 }}> 
          <div key={item.key}>
            <Form.Item label="字段名稱1" {...formItemLayout}>
              {getFieldDecorator(`${formTitle}.${index}.${formData[0]}`, {
                rules: [{ required: true, message: '請(qǐng)?zhí)顚?}],
                initialValue: item[formData[0]],
              })(<Input maxLength={8} placeholder="請(qǐng)?zhí)顚? />)}
            </Form.Item>
            <Form.Item label="字段名稱2" {...formItemLayout}>
              {getFieldDecorator(`${formTitle}.${index}.${formData[1]}`, {
                rules: [{ required: true, message: '請(qǐng)?zhí)顚?}],
                initialValue: item[formData[1]],
              })(<Input maxLength={8} placeholder="請(qǐng)?zhí)顚? />)}
            </Form.Item>
            <Form.Item label="字段名稱3" {...formItemLayout}>
              {getFieldDecorator(`${formTitle}.${index}.${formData[2]}`, {
                rules: [{ required: true, message: '請(qǐng)選擇'}],
                initialValue: item[formData[2]],
              })(<Input maxLength={8} placeholder="請(qǐng)?zhí)顚? />)}
            </Form.Item>
            <Form.Item label="字段名稱4" {...formItemLayout}>
              {getFieldDecorator(`${formTitle}.${index}.${formData[3]}`, {
                initialValue: item[formData[3]],
              })(<Input maxLength={8} placeholder="請(qǐng)?zhí)顚? />)}
            </Form.Item>
          </div>
          {detail && detail.length > 1 && 
            <div style={{ position: 'absolute', top: 5, right: 5, fontSize: 20,  }}>
              <Icon type="close" onClick={() => deleteOne(index)}/>
            </div>
          }
        </div>
      ))}
      {detail && detail.length < 5 && 
        <Button 
          style={{ width: '100%', marginTop: 8 }}
          type="dashed"
          icon="plus"
          onClick={newItem}
        >添加</Button>}
    </Fragment> 
  );
};

export default Form.create()(FormItemList);