javascript - 为什么删除元素后所需的检查不起作用？

Question

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

• 单击Submit按钮显示字段是必需的。
• 然后从列表中选择任何元素。
• 删除选定的元素然后再次单击提交按钮。它应该显示“必填”字段检查。但它没有显示任何内容，为什么？

这是我的代码 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}
    />

标签： javascriptreactjsreact-hooksreact-hook-form

Answer 1

当表单最初加载时，表单的值是一个空对象 -

{}

当您选择一个国家（例如，“安道尔”）时，您的表单值变为：

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

然后当您取消选择国家/地区时，表单的值变为：

{"country":[]}

一个空数组在技术上符合“必需”标准（毕竟它不为空），因此您所需的处理程序不会触发。

您可以通过在App班级中显示表单的值来验证这种情况正在发生 -

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>
);

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

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