Введение
Муравей ПлюсAnt Design FormУсовершенствованная версия на его основе инкапсулирует чрезвычайно удобный способ использования Form и упрощенный API компонентов, связанных с Form.
Документация
Функции
-
очень легко: Попрощайтесь с утомительным
form.getFieldDecorator
Шаблонный код против подробногоrules
Проверить код. - прогрессивное улучшение: Если вы не используете новые функции, вы можете использовать компоненты в качестве компонентов в Ant Design.
-
Единая подсказка: может быть определен глобально
rules
Проверьте оперативную информацию, унифицируйте опыт, попрощайтесь с надоедливой настройкой и неуправляемостью. - Упрощенный API: общие API-интерфейсы компонентов, связанных с формами, упрощены для более плавной разработки.
Установить
Yarn
yarn add antx
npm
npm install antx
использовать
Пример:код sandbox.io / yes / текущий новый антипирен 87…
import { Form, Input, Button } from 'antx';
const Demo = ({ form }) => (
<Form api={form} data={{ username: 'Emily' }}>
<Input
label="用户名"
id="username"
rules={['required', 'string', 'max=10']}
max={10}
msg="full"
/>
<Button htmlType="submit">提交</Button>
</Form>
);
export default Form.create()(Demo);
В Реквизите формы управления,id
Уникально идентифицирует поле формы,label
для Form.Itemlabel
.getFieldDecorator(id, options)
options
Элементы в параметре можно напрямую использовать в свойствах компонента, напримерrules
,initialValue
Ждать.
Муравей Плюс такжеrules
После оптимизации вы можете использовать краткие строки для установки правил проверки. В то же время он обеспечивает лучший пользовательский интерфейс для запросов подтверждения.
Да все так просто и понятно. Полное введение в использование см.Документация компонента формы Ant Plus.
В сравнении
Сравнение кода использования Ant Plus и использование традиционного дизайна муравей для формы сборки.
Связь
GitHub: GitHub.com/школьные школы/…
npm: Уууу, эта лошадь plus.com/package/Anta…
наконец
Добро пожаловать, чтобы попробовать, добро пожаловать в Star, испытайте путь развития, который никогда не был таким простым.