Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 1x 10x 10x 10x 2x 1x 10x 2x 2x 2x 2x 2x | // @ts-nocheck import React from "react"; import { Form } from "@tencent/tea-component/lib/form"; import { Input } from "@tencent/tea-component/lib/input"; import { RadioGroup, Radio } from "@tencent/tea-component/lib/radio"; import { CheckboxGroup, Checkbox } from "@tencent/tea-component/lib/checkbox"; import { Card } from "@tencent/tea-component/lib/card"; import { InputNumber } from "@tencent/tea-component/lib/inputnumber"; import { Button } from "@tencent/tea-component/lib/button"; // eslint-disable-next-line import { useForm, useField } from "react-final-form-hooks"; const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); function getStatus(meta, validating) { Iif (meta.active && validating) { return "validating"; } Eif (!meta.touched) { return null; } return meta.error ? "error" : "success"; } export default function FormWithReactFinalFormExample() { async function onSubmit(values) { await sleep(1500); alert(JSON.stringify(values)); } const { form, handleSubmit, validating, submitting } = useForm({ onSubmit, /** * 默认为 shallowEqual * 如果初始值有多层,会导致重渲染,也可以使用 `useEffect` 设置初始值: * useEffect(() => form.initialize({ }), []); */ initialValuesEqual: () => true, initialValues: { name: "", age: 18, hobbies: [] }, validate: ({ name, sex, age, hobbies }) => ({ name: name.length < 4 ? "昵称太短了哦" : undefined, sex: !sex ? "请选择性别" : undefined, age: age < 18 ? "你好像还未成年哦" : undefined, hobbies: hobbies.length < 1 ? "请至少选择一个哦" : undefined, }), }); const name = useField("name", form); const sex = useField("sex", form); const age = useField("age", form); const hobbies = useField("hobbies", form); return ( <div className="example-stage"> <Card> <Card.Body> <form onSubmit={handleSubmit}> <Form.Title>表单验证</Form.Title> <Form> <Form.Item required label="昵称" status={getStatus(name.meta, validating)} message={ getStatus(name.meta, validating) === "error" && name.meta.error } > <Input {...name.input} placeholder="你是谁" autoComplete="off" /> </Form.Item> <Form.Item required label="性别" status={getStatus(sex.meta)} message={getStatus(sex.meta) === "error" && sex.meta.error} > <RadioGroup {...sex.input}> <Radio name="male">男</Radio> <Radio name="female">女</Radio> </RadioGroup> </Form.Item> <Form.Item label="年龄" status={age.meta.error ? "error" : "success"} message={age.meta.error} > <InputNumber {...age.input} min={12} max={100} /> </Form.Item> <Form.Item label="兴趣" message="选择一项或多项爱好" status={getStatus(hobbies.meta)} > <CheckboxGroup {...hobbies.input}> <Checkbox name="code">编程</Checkbox> <Checkbox name="web">抠图</Checkbox> <Checkbox name="jinli">超越</Checkbox> </CheckboxGroup> </Form.Item> </Form> <Form.Action> <Button type="primary" htmlType="submit" loading={submitting} disabled={validating} > 提交 </Button> </Form.Action> </form> </Card.Body> </Card> </div> ); } |