react-hook-form，用于数据更新时出错

Question

我正在尝试配置 react-hook-form 以用于创建和更新操作。我正在使用 material ui 自动完成和文本字段。我面临的问题是一个具有自动完成功能的字段。

如果我传递一个输入值，它会显示它，但是当提交表单时，会触发 requi红色错误（好像该字段尚未填写）。

这是我的代码：

         <Controller
                control={control}
                name="type"
                render={({ field: { onChange, value }, fieldState: { error } }) => (
                  <Autocomplete
                    value={value}
                    onChange={(event, item) => {
                      onChange(item.value);
                  }}
                    id="type"
                    defaultValue={props.operation === 'edit' ? props.values.type : null}
                    options={projectTypes}
                    renderInput={(params) => <TextField {...params}
                      error={!!error}
                      helperText={error ? error.message : null}
                      label="type"
                      {...register('type')}
                    />}
                  />
                )}
             
                rules={{ required: 'Project type is required' }}
              />

我尝试将输入值添加为“inputValue”，但我的选项不可用，我也无法从字段中清除该值。

有什么问题吗？

Answer 1

问题是您同时使用 <Controller /> 和 register 来注册您的字段。

您应该只使用其中之一，在您的用例中您应该使用 <Controller /> 并摆脱 <TextField />.

中的 register 调用

您还应该将字段的 defaultValue 传递给 <Controller /> 而不是传递给 <Autocomplete />。

<Controller
    control={control}
    name="type"
    defaultValue={props.operation === 'edit' ? props.values.type : null}
    render={({ field: { onChange, value }, fieldState: { error } }) => (
        <Autocomplete
            value={value}
            onChange={(event, item) => {
                onChange(item.value);
            }}
            id="type"
            options={projectTypes}
            renderInput={(params) => (
                <TextField
                    {...params}
                    error={!!error}
                    helperText={error ? error.message : null}
                    label="type"
                />
            )}
        />
    )}
    rules={{ required: 'Project type is required' }}
/>

react-hook-form，用于数据更新时出错

react-hook-form, error when using for data update

reactjs

material-ui

react-hook-form