資訊專(zhuān)欄INFORMATION COLUMN
摘要：在用的時(shí)候，我們?nèi)绻獙?duì)表單進(jìn)行添加和刪除該怎么弄呢，如下表單提交添加刪除名稱(chēng)名稱(chēng)不能為空請(qǐng)輸入名稱(chēng)刪除提交增加這里不僅能對(duì)表單進(jìn)行增加和刪除，還能對(duì)表單進(jìn)行驗(yàn)證，看是否有輸入，以上是本身沒(méi)有數(shù)據(jù)的情況，如果是有數(shù)據(jù)的情況如下表單提交添加刪
在用antd的時(shí)候，我們?nèi)绻獙?duì)表單進(jìn)行添加和刪除該怎么弄呢，如下：
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 (
{getFieldDecorator(`content[${index}].name`, {
rules: [{
required: true,
message: "名稱(chēng)不能為空！",
}],
})(
)}
{index > 0 ? (
) : null}
);
});
return (
);
}
const page = Form.create()(Page);
export default connect()(page);
這里不僅能對(duì)表單進(jìn)行增加和刪除，還能對(duì)表單進(jìn)行驗(yàn)證，看是否有輸入，以上是本身沒(méi)有數(shù)據(jù)的情況，如果是有數(shù)據(jù)的情況如下：
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 (
{getFieldDecorator(`content[${index}].name`, {
rules: [{
required: true,
message: "名稱(chēng)不能為空！",
}],
initialValue: item.name || ""
})(
)}
{index > 0 ? (
) : null}
);
});
return (
);
}
const page = Form.create()(Page);
export default connect()(page);
一般如果本身有數(shù)據(jù)，都會(huì)有每行數(shù)據(jù)的id，但是這個(gè)id不顯示，我們都會(huì)用getFieldDecorator給id聲明，這樣在我們提交表單的時(shí)候，就可以得到表單抓取到id的數(shù)據(jù)，有數(shù)據(jù)跟沒(méi)有數(shù)據(jù)的差別就是，有數(shù)據(jù)需要在表單getFieldDecorator的時(shí)候給一個(gè)初始值，其他兩者都一樣
具體代碼下載地址：https://gitee.com/hope93/antd...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100137.html
摘要：格式限制中表單的功能很多，下面就為大家整理了一下中常用的幾種表單輸入格式驗(yàn)證輸入框不能為空限制，如下名稱(chēng)不能為空請(qǐng)輸入名稱(chēng)輸入框字符限制，如下字符長(zhǎng)度范圍限制密碼不能為空密碼不能少于個(gè)字符密碼不能大于個(gè)字符請(qǐng)輸入密碼字符長(zhǎng)度限制昵稱(chēng)不能為空 格式限制 antd中表單的功能很多，下面就為大家整理了一下antd中常用的幾種表單輸入格式驗(yàn)證： 1. 輸入框不能為空限制，如下： {getF...
摘要：是校驗(yàn)表單組件數(shù)據(jù)正確性的字段，其值為數(shù)組，里面的數(shù)組元素可以為。所以數(shù)組元素如果為的話(huà)，其內(nèi)容就是的。到目前為止，表單適合大部分的表單應(yīng)用場(chǎng)景。 JSON表單 描述 JSON表單是一個(gè)基于React的抽象組件，它可以把JSON數(shù)據(jù)格式描述的表單轉(zhuǎn)換成項(xiàng)目中的表單，它可以用簡(jiǎn)短的幾行代碼，快速的生成Form表單。JSON表單的優(yōu)點(diǎn)是： 可以快速構(gòu)建出一個(gè)表單 表單的數(shù)據(jù)、邏輯、視圖分...
摘要：嵌套組件配置如果表單組件里還含有其他表單組件，這時(shí)直接通過(guò)組件配置去渲染無(wú)疑能節(jié)約不少的工作量。請(qǐng)輸入方法傳入組件配置的列表就能渲染出表單組件來(lái)，需要注意的是，子表單組件的一定是基于父表單組件的。表單的實(shí)例方法請(qǐng)看下節(jié)的生成表單四 container表單組件 在實(shí)際的項(xiàng)目中，JSON表單提供的表單組件是遠(yuǎn)遠(yuǎn)不夠的，而且提供表單組件是一件低效的事，目前Ant Design組件庫(kù)提供的表單...
摘要：在裝載組件之前調(diào)用會(huì)組件的構(gòu)造函數(shù)。當(dāng)實(shí)現(xiàn)子類(lèi)的構(gòu)造函數(shù)時(shí)，應(yīng)該在任何其他語(yǔ)句之前調(diào)用設(shè)置初始狀態(tài)綁定鍵盤(pán)回車(chē)事件，添加新任務(wù)修改狀態(tài)值，每次修改以后，自動(dòng)調(diào)用方法，再次渲染組件?？梢酝ㄟ^(guò)直接安裝到項(xiàng)目中，使用或進(jìn)行引用。 首先我們看一下我們完成后的最終形態(tài)：TodoMvc： showImg(https://segmentfault.com/img/remote/14600000085...
摘要：實(shí)現(xiàn)名稱(chēng)請(qǐng)輸入名稱(chēng)類(lèi)型請(qǐng)輸入類(lèi)型語(yǔ)法復(fù)雜代碼量也比較龐大，說(shuō)實(shí)話(huà)，到目前為止，我也沒(méi)記住過(guò)它的那些方法，最嚴(yán)重的問(wèn)題是存在比較嚴(yán)重的性能問(wèn)題，當(dāng)表單組件比較多的時(shí)間，頁(yè)面會(huì)卡頓。 背景 表單問(wèn)題，不管是在 jQuery 時(shí)代，還是 Angular/React 時(shí)代，都永遠(yuǎn)是前端工程師們的痛，但是這又是沒(méi)辦法的事情，業(yè)務(wù)需求多種多樣，對(duì)于中后臺(tái)業(yè)務(wù)而言，表單頁(yè)面和報(bào)表頁(yè)面基本上是中后臺(tái)業(yè)...
閱讀 3217·2023-04-26 03:06
閱讀 3699·2021-11-22 09:34
閱讀 1148·2021-10-08 10:05
閱讀 3050·2021-09-22 15:53
閱讀 3552·2021-09-14 18:05
閱讀 1422·2021-08-05 09:56
閱讀 1936·2019-08-30 15:56
閱讀 2137·2019-08-29 11:02
