Почему обязательная проверка не работает после удаления элемента? - PullRequest
Новая
       10

Почему обязательная проверка не работает после удаления элемента?

0 голосов
/ 10 февраля 2020

Не могли бы вы сказать, почему мой требуемый чек не работает при автозаполнении. Я использую 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}
    />

1 Ответ

2 голосов
/ 10 февраля 2020

Когда форма загружается изначально, значением вашей формы является пустой объект - 

{}

Когда вы выбираете страну (скажем, «Андорра»), значением вашей формы становится: 

{"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;
}}
...