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