Как React-hook-form взаимодействуют друг с другом полями?

#reactjs #react-hooks #react-hook-form

#reactjs #реагирующие крючки #react-hook-form

Вопрос:

Итак, я в основном новичок в-react-hook-form Я создал форму с управляемыми входами, где мои условия для 2-го ввода основаны на моем первом вводе. Мой 1-й ввод — это продолжительность, где у меня есть 2 варианта «Ежемесячно» и «Ежегодно». Мой 2-й ввод — это бюджет, где минимальный бюджет составляет 200 для ежемесячно и 400 для ежегодно.

Это мой код:

 <div style={{ marginTop: theme.spacing(1) }}>
    <Controller
      as={Select}
      row
      name="duration"
      control={control}
      defaultValue="Monthly"
      fullWidth
      label={<FormattedMessage {...messages.duration} />}
      margin="normal"
      options={DURATION_OPTIONS}
      rules={{
        required: 'Required'
      }}
    />
  </div>


  <div>
    <Controller
      as={NumberField}
      row
      name="budget"
      control={control}
      defaultValue="1000"
      fullWidth
      label={<FormattedMessage {...messages.howMuchBudget} />}
      margin="normal"
      rules={{
        required: true,
        min: {
          value: 400,
          message: 'Min is 400',
        }
      }}
    />
  </div>

Теперь я хочу запустить свою 2-ю проверку поля на основе моей 1-й проверки поля динамически. если моя продолжительность выбрана ежемесячно, то минимальная проверка для 2-го ввода должна быть 200, а если моя продолжительность выбрана как годовая, то минимальная проверка для 2-го ввода должна быть 400.

Любая помощь будет высоко оценена.

1. Вы можете использовать getValues для извлечения значений формы, а затем получить доступ к тем, которые вы хотите внутри вашей проверки: react-hook-form.com/api/#getValues

2. Я пробовал это, но у меня не работает, можете ли вы предоставить реквизиты just rules с помощью getValues() ?

3. Эй, @Jayce444 нужен какой-то код для этого

Ответ №1:

Вот простой пример. В этом случае фамилия должна быть короче имени, иначе вы получите сообщение об ошибке.

 function App() {
  const { register, handleSubmit, errors, getValues } = useForm({mode:'onChange'});

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First name</label>
      <input name="firstName" defaultValue='Potato' ref={register} />

      <label>Last name (must be shorter than first name)</label>
      <input name="lastName" ref={register({
        validate: {
          shorterThanFirstName: value => value.length < getValues().firstName?.length,
        }
      })} />
      {errors.lastName amp;amp; <p>Last name must be shorter than first name</p>}

      <input type="submit" />
    </form>
  );
}