Ant design pro 개발 노트 - 폼 과 데이터 바 인 딩

antd 는 폼 의 양 방향 바 인 딩 을 지원 합 니 다. 개발 과정 에서 onChange() 리 턴 함 수 를 통 해 구성 요소 의 값 을 얻 을 필요 가 없습니다. getFieldDecorator() 를 통 해 데이터 바 인 딩 기능 을 자동 으로 완성 할 수 있 습 니 다.

{
    getFieldDecorator('email', {})()
}

두 번 째 매개 변 수 는 options 입 니 다. 서로 다른 설정 은 더 많은 작업 을 수행 할 수 있 습 니 다. 예 를 들 어 필수 데이터 검증 등 입 니 다.

{
    let opt = { rules: [ { required: true, message: "the field must supply." } ] }
    getFieldDecorator('email', opt)()
}

더 많은 업무 논리 데이터 검증 을 완성 할 수 있 습 니 다. 예 를 들 어:

{
    let opt = { rules: [ { type: 'email', message: "It's invalid email address." } ] }
    getFieldDecorator('email', opt)()
}

초기 값 도 지정 할 수 있 습 니 다:

{
    let opt = { initialValue: '[email protected]' }
    getFieldDecorator('email', opt)()
}

주의: 통과initialValue 지정 한 초기 값 은 처음 입 니 다.render() 에서 작용 한다.만약 우리 가 API 를 통 해 데 이 터 를 얻 은 후에 폼 데 이 터 는 변 하지 않 을 것 이다.
이 럴 때 써 야 돼 요.mapPropsToFields() 필드 에 데 이 터 를 연결 합 니 다.

{
    function mapModelToProps(model) {
      return {
        item: model.requirement.item,
        loading: model.loading.effects['requirement/fetch']
      };
    }
    function mapPropsToFields(props) {
      return {
        description: Form.createFormField({
          value: props.item.description
        })
      }
    }
    export default connect(mapModelToProps)(Form.create({mapPropsToFields})(Edit));
}

맵 에 필요 한 데이터 에 두 개의 함수 가 있 습 니 다:

mapModelToProps() state 에 필요 한 데 이 터 를 props 에 투사 합 니 다.

mapPropsToFields() 는 props 의 데 이 터 를 폼 필드 에 표시 하고 필드 의 value 값 을 업데이트 합 니 다.이 함 수 를 사용 하려 면 바 인 딩 이 필요 한 필드 를 Form.createFormField() 로 밀봉 해 야 합 니 다.

Ant design 에서 사용 하 는 폼 구성 요 소 는?rc-form
사용 하 는 인증 구성 요 소 는?async-validator