Компоненты дизайна Ant — форма формы (1)

Ant Design

Ant Design of React @3.10.9

вытащить проектluwei.web.study-ant-design-pro, переключиться наqueryФилиал, вы можете увидеть эффект формы формы

Реализовать форму запроса

查询表单

идеи

  1. Создать форму:@Form.create()
  2. привязка данных формыgetFieldDecorator
  3. Условия запроса для отображения формы запросаrender <Form.Item>
  4. Получить значение условия запросаvalidateFields

код

1. Создать форму:@Form.create()

Form.create()

Это функция высокого порядка, которая передает компонент реакции и возвращает новый компонент реакции. Внутри функции входящий компонент будет преобразован, и будут добавлены определенные методы для выполнения некоторых секретных операций. Если вы хотите углубиться, пожалуйста, переместите«Глубокое понимание компонентов высшего порядка React», здесь мы не будем вдаваться в подробности.

черезForm.create()Упакованные компоненты принесут свои собственныеthis.props.formАтрибуты

// 使用方式如下：
class CustomizedForm extends React.Component {}
CustomizedForm = Form.create({})(CustomizedForm);

объединены в коде@издекоратор,использовать@Form.create()создавать.

2. Привязка данных формыgetFieldDecorator

getFieldDecorator(id, options)

Используется для двустороннего связывания с формами

<!-- 表单数据绑定 -->
<Form.Item {...formItemLayout} label={'名称'}>
	{getFieldDecorator('searchName')(
		<Input placeholder={'请输入名称'} />
	)}
</Form.Item>

3. Визуализация условий запроса формы запросаrender <Form.Item>

При определении поля формы оно отображается на странице, что соответствует коду на шаге 2.

Дополнительные свойства FormItem см.Ant Design - Form - Form.Item

4. Получить значение условия запросаvalidateFields

form.validateFields / validateFieldsAndScroll

Проверить и получить набор значений полей ввода и Error, если параметр fieldNames пуст, проверить все компоненты

const { form } = this.props;

// 获取并检查表单数据
form.validateFields((err, fieldsValue) => {
  	if (err) return;
  	const { searchName = '' } = fieldsValue;
});

понять глубже

  • Форма дизайна муравья

  • rc-form

  • Интерпретация исходного кода antd (9) - Форма

  • Об авторе: Ли Яохуэй, веб-разработчик веб-интерфейса Reed Technology, представительные работы: апплет Feihuating, ген выносливости, красный конверт YY emoji, мини-игра YY Stacking Square Live Competition. Он хорош в создании веб-сайтов, разработке официальной учетной записи, разработке апплета WeChat, мини-игр и разработке официальной учетной записи, уделяя особое внимание исследованиям в области интерфейса, рендеринга на стороне сервера, технологии SEO, дизайна взаимодействия, рендеринга изображений, анализа данных и т. д. .

    Добро пожаловать, чтобы сражаться плечом к плечу с нами:web@talkmoney.cnдоступwww.talkmoney.cnпонять больше

Категории