RadioGroup與表單驗(yàn)證整合

要將RadioGroup和表單驗(yàn)證整合在一起，可以使用react-hook-form庫來管理表單狀態(tài)并進(jìn)行表單驗(yàn)證。下面是一個(gè)使用RadioGroup和react-hook-form庫來進(jìn)行表單驗(yàn)證的示例：

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { RadioGroup, FormControlLabel, Radio } from '@material-ui/core';

const MyForm = () => {
  const { control, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="gender"
        control={control}
        rules={{ required: 'Gender is required' }}
        render={({ field }) => (
          <RadioGroup
            {...field}
            aria-label="gender"
            defaultValue=""
          >
            <FormControlLabel value="male" control={<Radio />} label="Male" />
            <FormControlLabel value="female" control={<Radio />} label="Female" />
          </RadioGroup>
        )}
      />
      {errors.gender && <p>{errors.gender.message}</p>}
      
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

在上面的示例中，我們使用react-hook-form庫來創(chuàng)建表單，并使用Controller組件來包裹RadioGroup組件。我們?yōu)間ender字段添加了一個(gè)必填規(guī)則并在表單中顯示錯(cuò)誤消息。當(dāng)表單提交時(shí)，我們可以通過handleSubmit方法來觸發(fā)表單驗(yàn)證并提交數(shù)據(jù)。

通過這種方式，我們可以輕松地管理RadioGroup和表單驗(yàn)證，確保用戶輸入的數(shù)據(jù)符合預(yù)期的要求。