radix form

礼记有言：独学而无友，则孤陋而寡闻
让我们一起了解更多便捷方法，缩短开发时间去摸鱼，嘿嘿。

radix ui 这个库用的还挺多。
来看看它的form表单，验证和错误提示吧。

email 的验证和错误提示

import { Root, Field, Label, Message, Control, Submit } from "@radix-ui/react-form";
/**
 * 
 * match 的值：
 *    valid:有效的
 *    valueMissing：值缺失
 *    typeMismatch：类型不匹配
 *    badInput：坏的输入，
 *    'patternMismatch' :规则错误
 *    'rangeOverflow' 
 *    'rangeUnderflow'
 *    'stepMismatch' 
 *    'tooLong'
 *    'tooShort'
 *    match={(value, formData) => boolean}
 *        例如：--> match={(value, formData) => value !== "John"}
 * 
 */

const errorsStyles = "text-red text-sm"
export function StudyForm() {
  return (
    <Root>
      <Field name={"form"}>
        <div>
          <Label>Email</Label>
          <Control asChild>
            <input className="border border-gray-400 p-1 ml-1 rounded-lg" type="email" required />
          </Control>
          <div>
            {/* 邮箱类型不正确的时候提示错误 */}
            <Message match="typeMismatch" className={errorsStyles}>
              Please provide a valid email
            </Message>
            {/* 值缺失的时候,提示错误 */}
            <Message match="valueMissing" className={errorsStyles}>
              Please enter your email
            </Message>
          </div>
        </div>
      </Field>
      <Submit asChild>
        <button className="w-[100px] p-2 border border-gray-400  rounded-[8px]">Submit</button>
      </Submit>
    </Root>
  )
}

radio
讲真的，我不是很习惯这个库，就像radio，值为空的时候，只有required来控制，若写 error 提示，还需借助 onValueChange。

{/* radio */}
      <RadioGroup.Root name="friend" required defaultValue="carrot" className="flex gap-4">
        {['carrot', 'monet']?.map((v: string, index: number) => {
          return (
            <div className="flex items-center mb-3 w-fit" key={index}>
              <RadioGroup.Item
                className={`w-4 h-4 bg-white rounded-[50%] border border-gray-400 flex justify-center items-center
                      data-[state=checked]:border-blue-500`}
                defaultChecked
                id={v}
                value={v}
              >
                <RadioGroup.Indicator className="data-[state=checked]:text-blue-500">
                  <CheckIcon />
                </RadioGroup.Indicator>
              </RadioGroup.Item>
              <label className="ml-2" htmlFor={v}>
                {v}
              </label>
            </div>
          )
        })}
      </RadioGroup.Root>