与MUI组件集成时，React-Hook-Form Controller应该放在哪里？

Question

我很困惑在与 MUI

Controller

、

CheckBox

或

Select

集成时将 React-Hook-Form

RadioGroup

放在哪里。以以下两个代码片段为例。

<Grid xs={12}>
    <Controller
        name="gender"
        control={control}
        rules={{required: "Gender is required."}}
        render={({field}) => (
            <FormControl {...field} error={!!errors.gender}>
                <FormLabel error={false}>Gender</FormLabel>
                <RadioGroup row>
                    <FormControlLabel
                        control={<Radio/>}
                        label="Male"
                        value="male"
                    />
                    <FormControlLabel
                        control={<Radio/>}
                        label="Female"
                        value="female"
                    />
                </RadioGroup>
                <FormHelperText>{errors.gender ? errors.gender?.message : " "}</FormHelperText>
            </FormControl>
        )}
    />
</Grid>

<Grid xs={12}>
    <FormControl error={!!errors.gender}>
        <FormLabel error={false}>Gender</FormLabel>
        <Controller
            name="gender"
            control={control}
            rules={{required: "Gender is required."}}
            render={({field}) => (
                <RadioGroup row {...field}>
                    <FormControlLabel
                        control={<Radio/>}
                        label="Male"
                        value="male"
                    />
                    <FormControlLabel
                        control={<Radio/>}
                        label="Female"
                        value="female"
                    />
                </RadioGroup>
            )}
        />
        <FormHelperText>{errors.gender ? errors.gender?.message : " "}</FormHelperText>
    </FormControl>
</Grid>

两个代码片段都工作正常，但我不知道应该将

Controller

放在哪里。我研究过 React-Hook-Form 文档，但它没有提及。只有示例演示了

render

的

Controller

属性中的回调函数简单地返回

Input

或

Select

。然而，MUI

CheckBox

、

Select

或

RadioGroup

经常被

FormControl

包裹。有人可以提供建议吗？

Answer 1

简单来说，你只需要在渲染道具中放置 FotmControlLabel 或 RadioGroup 或任何必要的输入组件即可，例如：

<section>
    <label>Radio Group</label>
    <Controller
      render={({ field }) => (
        <RadioGroup aria-label="gender" {...field}>
          <FormControlLabel
            value="female"
            control={<Radio />}
            label="Female"
          />
          <FormControlLabel value="male" control={<Radio />} label="Male" />
        </RadioGroup>
      )}
      name="RadioGroup"
      control={control}
    />
</section>

在 React-Hook-Form 包的 Github 存储库中，有一个“examples”目录，其中包含许多不同输入字段的示例。您可以在那里找到与 React-Hook-Form 集成的 MUI 组件输入字段。

示例

MUI 集成输入组件示例（Radio group、Switch、Checkbox、Select 等）