All files / src/form/_example FormWithReactFinalFormHooksExample.jsx

66.67% Statements 12/18
45.45% Branches 10/22
57.14% Functions 4/7
75% Lines 12/16

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>
  );
}