проверка нескольких форм на странице antd

Ant Design

вопрос

Найден при выполнении проекта antd, используйтеForm.create()(xxx)в созданном модулеFormДоступно до отправки формыthis.props.form.validateFieldsAndScroll()Чтобы определить, прошла ли проверка успешно,this.props.formТо есть весь модуль страницыForm, то если на странице несколькоForm, затем используйтеthis.props.form.validateFieldsAndScroll()Оценка результата проверки для всей страницыFormсудить, а не по одномуFormСудя по результатам проверки, проблема здесь, какFormвыносить суждения?

Решение

  1. Ручная проверка путем добавления элементов формыchangeМониторинг событий, получение значений элементов формы и ручная проверка — это метод, но он идет вразрез с идеей реактивного дизайна.
  2. Отделите форму как компонент. Страница передает значения, требуемые компонентом формы, через свойства и поддерживает соответствующую логику внутри компонента формы. Это также рекомендуемый метод в этой статье.

Реализация кейса

Подкомпонент формы:

import React, { Component } from 'react';
import {Button, Form, Input, Select} from 'antd';

const FormItem = Form.Item;

class Forms extends Component{
  getItemsValue = ()=>{
      const val= this.props.form.getFieldsValue(); // 获取from表单的值
      return val;
  }
  render(){
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const { form, initValue1, initValue2, initValueList } = this.props;
    const { getFieldDecorator } = form; // 校验控件
    return(
      <Form style={{backgroundColor: '#fff', padding: '20px'}}>
        <FormItem
          {...formItemLayout}
          label={`相关数量`}
        >
          {getFieldDecorator(`amount`,{
            rules: [{
              message: '必填字段!',
              required: true
            }],
            initialValue: initValue1 ? initValue1 : undefined
          })(
            <Input placeholder="请输入"/>
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label={`选择相关名称`}
        >
          {getFieldDecorator(`name`,{
            rules: [{
              message: '必填字段!',
              required: false
            }],
            initialValue: initValue2 ? initValue2 : undefined
          })(
            <Select
              placeholder="请选择"
              onChange={this.handleSelectChange}
            >
              {
                initValueList && initValueList.map((x, i) => (
                  <Option value={x.Id} key={i}>{x.name}</Option>
                ))
              }
            </Select>
          )}
        </FormItem>
      </Form>
    )
  }
}

export default Form.create()(Forms);        //创建form实例

Дочерний компонент формы, получает исходные данные от родительского компонента, в компонентеgetItemsValueПользовательский метод возвращает значение формы и должен вызываться в родительском компоненте.

Родительский компонент:

import React, { Component } from 'react';
import { Modal, Button } from 'antd';
import Forms from './Forms'

export default class Modals extends Component {
    constructor(props) {
        super(props);
        this.state = {
          visible: false,
          initValue1: 0,
          initValue2: 'myName',
          initValueList: ["李云龙", "李荣基", "李达"]
        };
    }
    handleClick = () => {
        this.setState({
            visible: true
        })
    };
    handleCreate = () => {
        let values = this.formRef.getItemsValue();
        // 获取到子组件form的值，做进一步操作
        this.setState({
            visible: false
        })
    };
    render() {
        return (
            <section>
                <Modal
                  visible={this.state.visible}
                  title="编辑"
                  onOk={this.handleCreate}
                  onCancel={() => {
                    this.setState({ visible: false });
                  }}
                  okText="保存"
                  cancelText="取消"
                >
                  <Forms
                    initValue1={initValue1}
                    initValue2={initValue2}
                    initValueList={initValueList}
                    wrappedComponentRef={(form) => this.formRef = form}
                  />
                </Modal>
                <Button onClick={()=>{ this.handleClick }}>点击弹框</Button>
            </section>
        );
    }
}

Здесь главное использоватьwrappedComponentRefсобственность получить этоFormСсылка просто понимается как получение экземпляра формы дочернего компонента, поэтому его можно найти вhandleCreateчерез функциюthis.formRef.getItemsValue()Вызовите метод подкомпонента, чтобы получить возвращаемое значение формы. На данный момент вышеуказанная проблема решена.

оwrappedComponentRefСмотрите описание дляи описание официального сайта.

Категории