React 는 Antd 의 Form 구성 요 소 를 어떻게 이용 하여 폼 기능 을 실현 하 는 지 상세 하 게 설명 합 니 다.
8671 단어 react.form 구성 요소양식
1.폼 은 반드시 폼 도 메 인 을 포함 하고 폼 도 메 인 은 입력 컨트롤,표준 폼 도 메 인,태그,드 롭 다운 메뉴,텍스트 도 메 인 등 이 될 수 있 습 니 다.
여기에 봉 인 된 폼 필드
2.Form.create 를 사용 하여 처리 한 폼 은 자동 으로 데 이 터 를 수집 하고 검사 하 는 기능 을 가지 지만 이 기능 이 필요 하지 않 거나 기본 적 인 행위 가 업무 수 요 를 만족 시 키 지 못 하면 Form.create 를 사용 하지 않 고 데 이 터 를 자체 적 으로 처리 할 수 있 습 니 다.
Form.create()를 통 해 포 장 된 구성 요 소 는 this.props.form 속성 을 가지 고 있 습 니 다.this.props.form 은 많은 API 를 제공 하여 데 이 터 를 처리 합 니 다.예 를 들 어 getFieldDecorator―폼 과 양 방향 으로 연결 하 는 데 사 용 됩 니 다.Antd 공식 문서 에 상세 하 게 참가 합 니 다.여 기 를 클릭 하여 보기
폼 스타일 먼저 보 여주 기:
import React from 'react';
import {Form, Table, Button, Select, Input, DatePicker} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const {RangePicker} = DatePicker;//
class UserManage extends React.Component {
render() {
const columns = [
{
title: ' ',
dataIndex: 'userName',
key: 'userName',
}, {
title: ' ',
dataIndex: 'mobile',
key: 'mobile',
}, {
title: ' ',
dataIndex: 'companyName',
key: 'companyName',
}, {
title: ' ',
dataIndex: 'lastOnlineTime',
key: 'lastOnlineTime',
}, {
title: ' ',
dataIndex: 'status',
key: 'status',
},
];
return (
<div>
<Form layout="inline" style={{marginBottom: '10px'}}>
<FormItem label=" ">
<RangePicker style={{width: '255px'}}/>
</FormItem>
<FormItem label=" ">
<Input type="text" placeholder=" 、 " style={{width: '155px'}}/>
</FormItem>
<FormItem label=" ">
<Select defaultValue=" " style={{width: '155px'}}>
<Option value=" "> </Option>
<Option value=" "> </Option>
<Option value=" "> </Option>
</Select>
</FormItem>
<Button type="primary" style={{marginTop: '3px', marginRight: '3px'}}> </Button>
<Button style={{marginTop: '3px'}}> </Button>
</Form>
<Table
columns={columns}
/>
</div>
)
}
}
export default Form.create()(UserManage)
colums 는 Table 구성 요소 의 API 입 니 다.columns 와 Column 구성 요 소 는 같은 API 를 사용 합 니 다.
dataIndex:열 데이터 가 데이터 항목 에 대응 하 는 key,a.b.c 의 내장 쓰기 지원
key:React 에 필요 한 key,유일한 dataIndex 가 설정 되 어 있다 면 이 속성 을 무시 할 수 있 습 니 다.
2.getFieldDecorator(id,options)를 사용 하여 폼 상호작용 을 한다.
1.현재 의 문 제 는 각종 조회 조건 의 데 이 터 를 어떻게 얻 느 냐 하 는 것 입 니 다.그래서 render()안의 코드 를 바 꾸 고 getFieldDecorator 는 폼 과 양 방향 으로 연결 하 는 데 사 용 됩 니 다.
...
render(){
const {form} = this.props;
const {getFieldDecorator} = form;
...
return (
<div>
<Form onSubmit={this.handleQuery} layout="inline" style={{marginBottom: '10px'}}>
<FormItem label=" ">
{getFieldDecorator('lastOnlineTime')(<RangePicker style={{width: '255px'}}/>)}
</FormItem>
<FormItem label=" ">
{getFieldDecorator('userQueryLike')(<Input type="text" placeholder=" " style={{width: '155px'}}/>)}
</FormItem>
<FormItem label=" ">
{getFieldDecorator('status', {initialValue: " "})(
<Select style={{width: '155px'}}>
<Option value="0"> </Option>
<Option value="1"> </Option>
<Option value="2"> </Option>
</Select>)}
</FormItem>
<Button type="primary" htmlType="submit" style={{marginTop: '3px', marginRight: '3px'}}> </Button>
<Button style={{marginTop: '3px'}}> </Button>
</Form>
<Table
columns={columns} /*dataSource={( model )}*/
/>
</div>
)
}
...
매개 변수
설명 하 다.
유형
기본 값
id
입력 컨트롤 의 유일한 표지 입 니 다.끼 워 넣 기 를 지원 합 니 다.
string
options.getValueFromEvent
onChange 의 인자(예 를 들 어 이벤트)를 컨트롤 의 값 으로 바 꿀 수 있 습 니 다.
function(..args)
r eference
options.initialValue
하위 노드 의 초기 값,유형,선택 가능 한 값 은 모두 하위 노드 에 의 해 결 정 됩 니 다.(주의:내부 검사 시 사용 하기 때 문 입 니 다.
===
변경 여 부 를 판단 하려 면 문자 크기 대신 변수 캐 시 에 필요 한 값 을 사용 하 는 것 을 권장 합 니 다)options.normalize
컨트롤 에 기본 value 변환
function(value, prevValue, allValues): any
-
options.rules
검사 규칙,상세 참조Antd 공식 문서
object[]
options.trigger
집합 노드 의 값 을 받 을 시기
string
'onChange'
options.validateFirst
어떤 규칙 의 검사 가 통과 되 지 않 을 때 남 은 규칙 의 검 사 를 중단 할 지 여부 입 니 다.
boolean
false
options.validateTrigger
하위 노드 값 을 검사 할 시기
string|string[]
'onChange'
options.valuePropName
하위 노드 의 값 속성,예 를 들 어 Switch 는'checked'입 니 다.
string
'value'
2.위 에서 폼 에 onSubmit 이 벤트 를 주 었 습 니 다.폼 을 제출 할 때 handle Query 방법 을 실행 합 니 다.
...
class UserManage extends React.Component {
//
handleQuery = (e) => {
if (e) e.preventDefault();
const {dispatch, form} = this.props;
form.validateFields((err, fieldsValue) => {
if (err) return;
//
const rangeValue = fieldsValue['lastOnlineTime'];
const userQueryLike = fieldsValue['userQueryLike'];
//
const values = {
...fieldsValue,
"lastOnlineTime": (rangeValue && rangeValue.length > 1) ?
([rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]) : null,
"userQueryLike": userQueryLike ? userQueryLike.trim() : userQueryLike,
};
dispatch({
type: "userManageModel/getUserList",
payload: {
values: values,
}
});
});
};
...
}
...
이 방법 에 서 는 form.vaidate Fields 를 호출 하여 입력 필드 의 값 과 Error 를 가 져 왔 습 니 다.필드 Value 에 들 어가 면 폼 의 FormItem 에서 가 져 온 값 입 니 다.그리고 fields Value[last Online Time]을 사용 하여 이전에 쓴 getFieldDecorator('last Online Time')와 맵 을 만 들 면 하나의 입력 필드 의 값 을 얻 을 수 있 습 니 다.요약 하면 React 의 Form 을 사용 하여 폼 기능 을 실현 하려 면 Form.create(구성 요소)를 사용 하여 포 장 된 구성 요소 가 this.props.form 속성 을 가지 도록 해 야 form 의 getFieldDecorator 와 vaidateFields 방법 을 호출 할 수 있 습 니 다.getFieldDecorator 의 id 는 vaidateFields 중의 fields Value[']에 대응 합 니 다.columns 의 dateIndex 는 model 에서 데이터 json 문자열 의 키 이름 을 가 져 오 는 것 에 대응 합 니 다.이것 은 구분 해 야 합 니 다.
이 방법 외 에 도 input 입력 상자 의 값 을 가 져 와 제출 하 는 두 가지 방법 이 있 습 니 다.이 글 을 볼 수 있 습 니 다.React 에서 input 의 값 을 가 져 와 제출 하 는 두 가지 방법
총결산
React 가 Antd 의 Form 구성 요 소 를 어떻게 이용 하여 폼 기능 을 실현 하 는 지 에 대한 상세 한 설명 은 여기까지 입 니 다.더 많은 React 가 Form 구성 요소 로 폼 내용 을 실현 하 는 지 에 대해 서 는 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
nginx 에서 사이트 아이콘 표시 설정전단 개발 환경: react:^16.4.1 webpack:^4.16.0 웹 팩 에 favicon. ico 설정 추가: nginx 는 ico 에 대한 지원 을 추가 합 니 다:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.