1. antd에는 동적으로 양식을 추가하는 방법이 있다는 것을 알고 있으며 구성 요소는 그림과 같습니다.
필드 추가를 클릭하면 빈 입력 상자 세트가 나타납니다. 효과는 다음과 같습니다.
antd 공식 웹사이트에서 관련 사용 사례를 입력하려면 클릭하세요.
2. 그러나 때로는 이러한 시나리오가 우리를 만족시키지 못할 때가 있습니다.최근 개발에서 다음과 같은 문제가 발생했습니다.
1) 문제 시나리오:
양식에는 기본적으로 양식의 첫 번째 행이 표시됩니다.필드 추가를 클릭하면 새 양식 행을 추가해야 하며 마지막 값을 입력하고 기본값을 입력하세요. (온라인에서 오랫동안 검색했는데 원하는 내용을 찾을 수 없었습니다. 동료들에게 조언을 구한 결과 너무 간단하다는 것을 알았습니다. 그래서 모든 사람들과 공유하고 싶습니다.)
2) 솔루션 아이디어
개인적인 해결책 아이디어(문제를 해결하지 못함):
처음에는 입력 상자를 만들 때 기본값을 지정하려고 생각했습니다. 그래서 생성할 때 defaultValue:'comment'를 직접 추가했는데 생성할 때 입력란에 comment가 있었네요. 그런데 폼을 클릭했을 때 직접 제출버튼 제출시 필수항목이 설정되어 있어서 폼에서 오류가 뜹니다. 혹시 이미 표시되어 있는지 한참 고민했는데 폼 작성시 "입력해주세요"라는 문구가 계속 뜨는 이유는 무엇인가요? 폼 생성시 주어진 값이 교체된 것으로 확인되었으며, 표시에는 문제가 없었으나, 폼을 인쇄해 보니 정말 비어있는 것을 확인하였습니다.
올바른 해결책:
추가 및 삭제를 위한 메소드가 공식적으로 formList에 캡슐화되어 있는 것으로 나타났습니다(다시 말하지만 모든 사람은 더 많은 메소드 주석을 읽어야 합니다).
그림과 같이 매우 간단합니다: (parameter) add: (defaultValue?: any, insertIndex?: number) => void
및 add는 공식적으로 작성된 메소드입니다. 추가하도록 설정하려는 FormItem의 필드 이름만 전달하면 됩니다. 그리고 add 설정하려는 값은 단지 defaultValue?: any이며, 추가된 양식에 대한 초기 값을 설정하고 싶다고 이 함수에 알려야 하며 insertIndex?:number, 새로 추가된 양식이 추가될 때마다 초기 값을 설정하고 싶기 때문에 새 양식을 생성하기 전에 양식의 길이를 좌표로 전달합니다. 이는 새로 생성된 양식의 첨자를 나타냅니다. add({ commont: 'comment' }, val.length);
관련 코드는 다음과 같습니다.
//因为是函数式的组件，所以直接从fields中通过箭头函数的形式拿到了add和remove这俩方法。
<Form.List name="columnList">
{
(fields, {
add, remove }) => {
const val = [];
const formVal = form.getFieldsValue().columnList;
fields.map((item, index) => {
val.push(item);//将表单的值赋值给val,在此可以对原表单的值进行修改
});
...
}}
</Form.List>
//点击添加字段按钮调用add
<Form.Item>
<Button
style={
{
width: '96px',
height: '40px',
position: 'absolute',
top: '0px',
}}
onClick={
() => {
add({
commont: 'comment' }, val.length);
}}
block
>
添加字段
</Button>
</Form.Item>