Понимание и использование форм AntDesign

React.js

основное введение

  • Хотя у реакции нет встроенной логики проверки формы, мы можем использовать компоненты формы в библиотеке компонентов реакции AntDesign.Formдля достижения этого требования.

  • В частности, компонент формы в AntDesignFormс полями формыForm.Item(контейнер для упаковки произвольных элементов управления вводом) Используйте с:

    • существуетForm.ItemУстановите правила проверки в форме при отправке формы или изменении ввода формы, выполнив this.props.form.validateFields()Для реализации проверки значения формы.
    • существуетForm.Itemпомещен вgetFieldDecoratorЗарегистрированные элементы управления формы (дочерние элементы) для реализации двусторонней привязки между элементами управления формы и формами, а также для сбора значений формы.

  • использоватьFormКлючом к встроенной функции автоматического сбора и проверки данных является использованиеForm.create()Компоненты упаковки (портал 👉Официальная документация AntDesign).

  • Form.create()Это функция более высокого порядка, которая возвращает новый реагирующий компонент с функциями регистрации, сбора и проверки, передавая реагирующий компонент. Он используется следующим образом:

class CustomizedForm extends React.Component {}
CustomizedForm = Form.create({})(CustomizedForm);
export default CustomizedForm;
  • черезForm.create()Упакованные компоненты поставляются с собственнымиthis.props.formсвойство, которое предоставляет ряд API для работы с данными, как описано вышеgetFieldDecoratorМетод используется для двусторонней привязки к форме. После прохождения компонентаgetFieldDecorator, то значение компонента будет полностью определятьсяFormперенимать.
  • Мы знаем, что есть два способа обновления компонентов: 1. Обновляется родительский компонент 2. Меняется его собственное состояние.
  • использоватьForm.create()Цель обертывания компонентов — обновить обернутый компонент с помощью первого метода:
    • однаждыgetFieldDecoratorТриггеры декоративных компонентовonChange事件, это инициирует обновление родительского компонента (forceUpdate), тем самым вызывая обновление упакованного компонента.
    • упомянутый вышеForm.create({})(CustomizedForm), CustomizedFormЭто то, что мы называем упакованным компонентом.
  • Далее будет представленоthis.props.formНесколько API и методов использования, предоставляемых ресурсом, остальные API можно посмотреть в документации (портал 👉Официальная документация AntDesign).

API, предоставляемый свойством this.props.form

getFieldDecorator

  • getFieldDecoratorЦель метода — зарегистрировать собираемые данные в экземпляре и синхронизировать зарегистрированное значение сgetFieldDecoratorна оформленном элементе управления формой, поэтому элемент управления больше не может пройтиvalueилиdefaultValueназначение, его состояние будет определятьсяgetFieldDecoratorУправляемый, можно использовать настройки значений по умолчаниюgetFieldDecoratorвнутреннийinitialValue. Он используется следующим образом:
// 语法：getFieldDecorator(id, options)
<Form.Item {...layout} label="题目" extra={titleExtra}>
    {getFieldDecorator('name', {
        rules: [
            { required: true, message: '记得填写题目' },
            { whitespace: true, message: '记得填写题目' },
        ],
        initialValue: name, // 默认值设置
    })(<Input allowClear={true}/>)}
</Form.Item>

getFieldValue

  • getFieldValueЦель метода — получить значение элемента управления вводом. Способ применения следующий:
let options = this.props.form.getFieldValue('name'); // 使用getFieldDecorator方法修饰的id为'name'的表单控件

setFieldsValue

  • setFieldsValueметод используется для динамической установки значения набора элементов управления вводом (⚠️ Примечание: неcomponentWillReceivePropsиспользуется внутри, иначе это приведет к бесконечному циклу). Способ применения следующий:
 // 设置使用getFieldDecorator方法修饰的id为'name'的表单控件的值
this.props.form.setFieldsValue({ name: undefined });

validateFields

  • validateFieldsСпособ используется для проверки и получения набора значений и ошибок в наборе полей ввода. Метод выглядит следующим образом (если параметр поля отображения пустым, все компоненты):
/*
    类型：
    (
      [fieldNames: string[]],
      [options: object],
      callback(errors, values)
    ) => void
*/
const { form: { validateFields } } = this.props;

validateFields((errors, values) => {
  // ...
});

validateFields(['field1', 'field2'], (errors, values) => {
  // ...
});

validateFields(['field1', 'field2'], options, (errors, values) => {
  // ...
});

// 通过 validateFields 方法验证表单是否完成填写，通过便提交添加操作。
handleOk = () => {
  const { dispatch, form: { validateFields } } = this.props;

  validateFields((err, values) => {
    if (!err) {
      dispatch({
        type: 'cards/addOne',
        payload: values,
      });
      // 重置 `visible` 属性为 false 以关闭对话框
      this.setState({ visible: false });
    }
  });
}

Проверка ограничения формата

  • В AntDesign есть много функций форм, среди них проверка формата ввода формы осуществляется установкойgetFieldDecorator(id, options)Параметры правила проверки, переданные в методoptions.rulesДля этого ниже приведен список нескольких проверок формата ввода формы, обычно используемых в AntDesign.

Поле ввода не может быть пустым пределом

  • Пример кода:
{getFieldDecorator('name', {
  rules: [{
    required: true,
    message: '名称不能为空',
  }],
})(<Input placeholder="请输入名称" />)}

Максимальное количество символов в поле ввода

  • Ограничение диапазона длины символов:
{getFieldDecorator('password', {
  rules: [{
    required: true,
    message: '密码不能为空',
  }, {
    min:4,
    message: '密码不能少于4个字符',
  }, {
    max:6,
    message: '密码不能大于6个字符',
  }],
})(<Input placeholder="请输入密码" type="password"/>)}
  • Ограничение длины символа:
{getFieldDecorator('nickname', {
  rules: [{
    required: true,
    message: '昵称不能为空',
  }, {
    len: 4,
    message: '长度需4个字符',
  }],
})(<Input placeholder="请输入昵称" />)}

таможенный чек

  • Атрибут validator настраивает проверку и должен возвращать обратный вызов:
{getFieldDecorator('passwordcomfire', {
  rules: [{
    required: true,
    message: '请再次输入密码',
  }, {
    validator: passwordValidator
  }],
})(<Input placeholder="请输入密码" type="password"/>)}
   
//  密码验证
const passwordValidator = (rule, value, callback) => {
  const { getFieldValue } = form;
  if (value && value !== getFieldValue('password')) {
    callback('两次输入不一致！')
  }

  // 必须总是返回一个 callback，否则 validateFields 无法响应
  callback();
}

ошибка пробела

  • Если во входных данных будет только один пробел, будет сообщено об ошибке:
{getFieldDecorator('nickname', {
  rules: [{
    whitespace: true,
    message: '不能输入空格',
  } ],
})(<Input placeholder="请输入昵称" />)}

регулярная проверка шаблона

  • Если ввод не является числом, это вызовет ошибку:
{getFieldDecorator('age', {
  rules: [{
    message:'只能输入数字',
    pattern: /^[0-9]+$/
  }],
})(<Input placeholder="请输入数字" />)}
  • Выше приведено введение полного текста.Если у вас есть какие-либо вопросы, пожалуйста, оставьте сообщение.
Категории