为什么删除元素后要求检查不起作用？

Question

你能告诉我为什么我需要的检查在自动完成中不起作用吗？我正在使用 material UI 和反应挂钩形式。重现步骤

单击 Submit 按钮，它显示字段是必需的。
然后 select 列表中的任何元素。
删除selected元素然后再次点击提交button.It应该显示“必填”字段 check.but 它没有显示任何内容，为什么 ??

这是我的代码 https://codesandbox.io/s/mui-autocomplete-with-react-hook-form-0wvpq

 <Controller
      as={
        <Autocomplete
          id="country-select-demo"
          multiple
          style={{ width: 300 }}
          options={countries}
          classes={{
            option: classes.option
          }}
          autoHighlight
          getOptionLabel={option => option.label}
          renderOption={(option, { selected }) => (
            <React.Fragment>
              <Checkbox
                icon={icon}
                checkedIcon={checkedIcon}
                style={{ marginRight: 8 }}
                checked={selected}
              />
              {option.label} ({option.code}) +{option.phone}
            </React.Fragment>
          )}
          renderInput={params => (
            <TextField
              {...params}
              label="Choose a country"
              variant="outlined"
              fullWidth
              name="country"
              inputRef={register({ required: true })}
              //  required
              error={errors["country"] ? true : false}
              inputProps={{
                ...params.inputProps,
                autoComplete: "disabled" // disable autocomplete and autofill
              }}
            />
          )}
        />
      }
      onChange={([event, data]) => {
        return data;
      }}
      name="country"
      control={control}
    />

Answer 1

最初加载表单时，表单的值为空对象 -

{}

当您 select 一个国家（例如，'Andorra'）时，您的表单值变为：

{"country":[{"code":"AD","label":"Andorra","phone":"376"}]}

然后当你 deselect 国家时，你的表格的价值变成：

{"country":[]}

一个空数组在技术上符合 "required" 标准（毕竟它不是空的）所以你需要的处理程序不会触发。

您可以通过在 App class -

中显示表单的值来验证是否发生这种情况

const { control, handleSubmit, errors, register, getValues } = useForm({});
return (
  <form noValidate onSubmit={handleSubmit(data => console.log(data))}>
    <Countries control={control} errors={errors} register={register} />
    <Button variant="contained" color="primary" type="submit">
      Submit
    </Button>
    <code>{JSON.stringify(getValues())}</code>
  </form>
);

简单的解决方法是不要 return 一个空数组作为控件的值 - 按如下方式更新 onChange 处理程序 -

onChange={([event, data]) => {
    return data && data.length ? data : undefined;
}}

为什么删除元素后要求检查不起作用？

Why required check not working after removing element?

javascript

reactjs

react-hooks

react-hook-form