使用 Material UI 自动完成和 React 挂钩表单进行错误验证答案

【问题标题】：Error validation with Material UI Autcomplete & React hook form使用 Material UI 自动完成和 React 挂钩表单进行错误验证
【发布时间】：2021-11-16 14:33:22
【问题描述】：

我正在使用 Material UI 构建一个表单，并使用 react hook 表单进行验证。除了自动完成之外，它使用反应钩子表单的控制器组件可以完美地工作。虽然它捕获自动完成数据，但错误处理不起作用。我假设这是因为虽然错误对象是从 Controller => Autocomplete 传递下来的，但它没有传递给嵌套的 TextField 组件。如果我对自动完成组件进行错误验证，它也不起作用。有人解决了这个问题吗？我的组件代码如下

<Controller
                            name="categories"
                            control={control}
                            defaultValue=''                            
                            render={(props) => 
                                <Autocomplete
                                    className='formInputs'
                                    options={categories}
                                    renderInput={params => 
                                        <TextField
                                            name='autoCompleteTextField'
                                            {...params}
                                            // value={props.field.value}
                                            label="What do you do?"
                                            variant="outlined"
                                            rules={{
                                                required: {
                                                    value: true,
                                                    message: "Please tell us what you're an expert on. It helps us prioritize your referrals"
                                                }
                                            }}
                                            error={Boolean(props.fieldState.error)}
                                            onChange={(e, data) => props.field.onChange(data)}
                                            {...props}
                                        />
                                    }
                                />
                            }
                        />

【问题讨论】：

您使用的是哪个 react-hook-form 和 MUI 版本？

标签： reactjs material-ui react-hook-form

【解决方案1】：

您应该将渲染回调的道具传播到Autocomplete 组件，而不是TextField。看看官方example。此外，规则道具应该放在Controller 组件中。

<Controller
  name="country"
  control={control}
  rules={{
    required: "Please enter something"
  }}

为了显示来自react-hook-form 的错误信息，您需要设置TextField 的helperText 属性

renderInput={(params) => (
  <TextField
    {...params}
    label="Choose a country"
    variant="outlined"
    error={!!fieldState.error}
    helperText={fieldState.error?.message}
  />
)}

完整示例

<Controller
  name="country"
  control={control}
  rules={{
    required: "Please enter something"
  }}
  render={({ field, fieldState }) => {
    return (
      <Autocomplete
        {...field}
        options={countries}
        getOptionLabel={(option) => option.label}
        renderOption={(option) => (
          <span>
            {countryToFlag(option.code)}
            {option.label}
          </span>
        )}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Choose a country"
            variant="outlined"
            error={!!fieldState.error}
            helperText={fieldState.error?.message}
          />
        )}
        onChange={(_, data) => field.onChange(data)}
      />
    );
  }}
/>

【讨论】：