React Hook 表单 + Material UI 复选框

Posted 2023-02-19

【中文标题】React Hook 表单 + Material UI 复选框

【英文标题】：React Hook Forms + Material UI Checkboxes

【发布时间】：2020-09-29 04:23:34

【问题描述】：

使用 React Hook Form 和 material-ui 复选框组件提交表单构建时出现错误。复选框的数量是从我的 api 的列表中构建的：

        <Grid item xs=12>
          <FormControl
            required
            error=errors.project?.stack ? true : false
            component='fieldset'>
            <FormLabel component='legend'>Tech Stack</FormLabel>
            <FormGroup>
              <Grid container spacing=1>
                techs.map((option, i) => (
                  <Grid item xs=4 key=i>
                    <FormControlLabel
                      control=
                        <Checkbox
                          id=`stack$i`
                          name='project.stack'
                          value=option.id
                          inputRef=register(required: 'Select project Tech Stack')
                        />
                      
                      label=option.name
                    />
                  </Grid>
                ))
              </Grid>
            </FormGroup>
            <FormHelperText>errors.project?.stack</FormHelperText>
          </FormControl>
        </Grid>

提交表单时出现以下错误（多次，每个复选框出现 1 次）：

Uncaught (in promise) 错误：对象作为 React 子对象无效 （找到：带有键 type, message, ref 的对象）。如果你打算渲染 子集合，请改用数组。

我不明白这个错误。该消息显然表示这是一个渲染问题，但该组件渲染得很好。问题发生在提交时。有什么建议吗？

谢谢

【参考方案1】：

我设法在不使用控制器的情况下使其工作。 道具应该在 FormControlLabel 内，而不是在 Checkbox 内

                <Grid item xs=4 key=i>
                    <FormControlLabel
                      value=option.id
                      control=<Checkbox />
                      label=option.name
                      name=`techStack[$option.id]`
                      inputRef=register
                    />
                  </Grid>
                ))

【参考方案2】：

更新：如果您使用 RHF >= 7，则应使用props.field 调用props.field.value 和props.field.onChange。

---

您可以使用默认的复选框控制器：

<FormControlLabel
    control=
      <Controller
        name=name
        control=control
        render=(props) => (
          <Checkbox
            ...props
            checked=props.value
            onChange=(e) => props.onChange(e.target.checked)
          />
        )
      />
    
    label=label
  />

我使用了 RHF 的控制器示例，但必须添加 checked=props.value： https://github.com/react-hook-form/react-hook-form/blob/master/app/src/controller.tsx

【讨论】：

checked=!!props.value 以避免在值最初未定义的情况下从不受控制更改为受控警告

【参考方案3】：

任何例子都有效，我正在使用这个：

const checboxArray = [
    name: '1h',
    label: '1 hora'
  ,
  
    name: '12h',
    label: '12 horas'
  ,
  
    name: '24h',
    label: '24 horas'
  ,
  
    name: '3d',
    label: '3 dias'
  ,
]; 


//This inside render function:

  checboxArray.map((checboxItem) => ( 
  <Controller name = 
      checboxItem.name
    
    control = 
      control
    
    key = 
      checboxItem.name
    
    rules = 
      
        required: true
      
    
    render = 
      (
        field: 
          onChange,
          value
        
      ) =>
      <
      FormControlLabel
      control =  <Checkbox
        checked = !!value
        
        onChange = 
          (event, item) => 
            onChange(item);
          
        
        name = 
          checboxItem.name
        
        color = "primary" /
        >
      
      label = 
        checboxItem.label
      
      />
    
    />
  ))

【参考方案4】：

如果有人难以使用 React material-ui 和 react-hook-form 实现多选复选框，您可以查看我的 codesandbox example

此外，react-hook-form 在useController 章节下的文档中提供了一个code example（不要忘记切换到复选框选项卡）。