最近開發的一個功能,和之前寫過的很像,但畢竟我也快兩年經驗了,當然不能再使用原來實現的方法,於是,又搞起來。
功能: 需要對多個Input組成的list可以新增和刪除
在之前的文章 react 涉及的增加,刪除list ,我說不可以使用 index
來做刪除,就使用了 給每個 list 添加 selfId
的方式來實現刪除。
然而事實是可以使用 index 來進行刪除操作的。當年我才疏學淺,沒有get到高級玩法,使用selfId
這樣的實現,無疑就是對數據過度操作了,所以學習了新的使用方法,實現如下:
技術棧: react hooks + antd Form
實現原理
其實新增還是不變的,在list後新增一個空對象,讓其多一條數據,再重新渲染。
刪除有所改變,首先,form 表單的 key, 學習官方的demo,經過一番改良,
使用 data.0.name1 這樣的格式作爲 某個表單的 key, 那麼根據form的機制,會自動產生
data: [{name1: 'xx'}]
這樣的數據格式,所以剛好也不用我們再次處理了。
然後說回刪除,
// 獲取當前的所有表單值
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)]);
再來詳細說一下,
1、獲取當前的所有表單值,是爲了等會執行表單替換
2、循環這個表單list值,再找出刪除的這個index,然後把後面的表單重新賦值,往前移動一個
3、刪除一個數組的長度
整體實現
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: '請填寫'}],
initialValue: item[formData[0]],
})(<Input maxLength={8} placeholder="請填寫" />)}
</Form.Item>
<Form.Item label="字段名稱2" {...formItemLayout}>
{getFieldDecorator(`${formTitle}.${index}.${formData[1]}`, {
rules: [{ required: true, message: '請填寫'}],
initialValue: item[formData[1]],
})(<Input maxLength={8} placeholder="請填寫" />)}
</Form.Item>
<Form.Item label="字段名稱3" {...formItemLayout}>
{getFieldDecorator(`${formTitle}.${index}.${formData[2]}`, {
rules: [{ required: true, message: '請選擇'}],
initialValue: item[formData[2]],
})(<Input maxLength={8} placeholder="請填寫" />)}
</Form.Item>
<Form.Item label="字段名稱4" {...formItemLayout}>
{getFieldDecorator(`${formTitle}.${index}.${formData[3]}`, {
initialValue: item[formData[3]],
})(<Input maxLength={8} placeholder="請填寫" />)}
</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);
關注我獲取更多前端資源和經驗分享
感謝大佬們閱讀,希望大家頭髮濃密,睡眠良好,情緒穩定,早日實現財富自由~