react+antd系列之Form表單(1):新增與刪除
阿新 • • 發佈:2018-11-21
在用antd的時候,我們如果要對錶單進行新增和刪除該怎麼弄呢,如下:
import { connect } from 'dva'; import { Form, Input, Button } from 'antd'; import styles from './eg1.css'; const FormItem = Form.Item; function Page(props) { const { form } = props; const { getFieldDecorator, getFieldValue } = form // 表單提交 const handleSubmit = (e) => { e.preventDefault(); form.validateFields((err, values) => { if (!err) { console.log(values); } }); } // 新增 const add = () => { const list = form.getFieldValue('list'); const nextList = list.concat({}); form.setFieldsValue({ list: nextList, }); } // 刪除 const deleteRow = (index) => { const list = form.getFieldValue('list'); const content = form.getFieldValue('content'); if (list.length === 1) { return; } form.setFieldsValue({ list: list.filter((item, key) => key !== index), content: content.filter((item, key) => key !== index), }); } getFieldDecorator('list', { initialValue: [{}] }); const list = getFieldValue('list'); const listContent = list.map((item, index) => { return ( <FormItem label='名稱:' key={index}> {getFieldDecorator(`content[${index}].name`, { rules: [{ required: true, message: "名稱不能為空!", }], })( <Input placeholder="請輸入名稱" style={{ width: '60%', marginRight: 8 }} /> )} {index > 0 ? ( <Button type="primary" onClick={deleteRow.bind(this, index)}>刪除</Button> ) : null} </FormItem> ); }); return ( <div className={styles.normal}> <Form onSubmit={handleSubmit}> {listContent} <FormItem> <Button type="primary" htmlType="submit">提交</Button> <Button type="primary" style={{ marginLeft: '10px' }} onClick={add}>增加</Button> </FormItem> </Form> </div> ); } const page = Form.create()(Page); export default connect()(page);
這裡不僅能對錶單進行增加和刪除,還能對錶單進行驗證,看是否有輸入,以上是本身沒有資料的情況,如果是有資料的情況如下:
import React from 'react'; import { connect } from 'dva'; import { Form, Input, Button } from 'antd'; import styles from './eg2.css'; const FormItem = Form.Item; function Page(props) { const { form } = props; const { getFieldDecorator, getFieldValue } = form // 表單提交 const handleSubmit = (e) => { e.preventDefault(); form.validateFields((err, values) => { if (!err) { console.log(values); } }); } // 新增 const add = () => { const list = form.getFieldValue('list'); const nextList = list.concat({}); form.setFieldsValue({ list: nextList, }); } // 刪除 const deleteRow = (index) => { const list = form.getFieldValue('list'); const content = form.getFieldValue('content'); if (list.length === 1) { return; } form.setFieldsValue({ list: list.filter((item, key) => key !== index), content: content.filter((item, key) => key !== index), }); } const slist = [{ id:'0001', name: '黎明' }, { id:'0002', name: '晴天' }] getFieldDecorator('list', { initialValue: slist }); const list = getFieldValue('list'); const listContent = list.map((item, index) => { getFieldDecorator(`content[${index}].id`, {initialValue: item.id || ''}) return ( <FormItem label='名稱:' key={index}> {getFieldDecorator(`content[${index}].name`, { rules: [{ required: true, message: "名稱不能為空!", }], initialValue: item.name || '' })( <Input placeholder="請輸入名稱" style={{ width: '60%', marginRight: 8 }} /> )} {index > 0 ? ( <Button type="primary" onClick={deleteRow.bind(this, index)}>刪除</Button> ) : null} </FormItem> ); }); return ( <div className={styles.normal}> <Form onSubmit={handleSubmit}> {listContent} <FormItem> <Button type="primary" htmlType="submit">提交</Button> <Button type="primary" style={{ marginLeft: '10px' }} onClick={add}>增加</Button> </FormItem> </Form> </div> ); } const page = Form.create()(Page); export default connect()(page);
一般如果本身有資料,都會有每行資料的id,但是這個id不顯示,我們都會用getFieldDecorator給id宣告,這樣在我們提交表單的時候,就可以得到表單抓取到id的資料,有資料跟沒有資料的差別就是,有資料需要在表單getFieldDecorator的時候給一個初始值,其他兩者都一樣
具體程式碼下載地址:https://gitee.com/hope93/antd-form1