react-hook-форма: использование только в выбранном элементе

#javascript #html #reactjs #forms #react-hook-form

Вопрос:

Я пытаюсь использовать только чтение в элементе select, поэтому пользователь не может изменить значение поля ввода, но при отправке формы мне все еще нужно это значение для Api, и я слышал, что единственный способ сделать это в форме react-hook-использовать только чтение вместо отключено, это работало в обычном поле ввода, но typescript выдает ошибку в элементе select. Это и есть код:

 interface dataProps {
  field_id: any;
  disabled: boolean;
}

 <select
  readOnly={props.disabled}
  id={props.field_id}
  {...register(...)}
  defaultValue={...}
  onChange={...}
  >
  <option>
    {...}
  </option>
  renderList(...)
</select>

Я попытался максимально сократить код, вот и вся ошибка, которую я получаю:

 Type '{ children: any[]; defaultValue: any; onChange: (e: ChangeEvent<HTMLSelectElement>) => void; onBlur: ChangeHandler; ref: RefCallBack; name: string; readOnly: true; id: any; }' is not assignable to type 'DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>'.
  Property 'readOnly' does not exist on type 'DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>'.

Я прочитал документацию react-hook-формы , но я ничего не видел там об использовании readOnly , я попал по этой ссылке, и когда я попытался изменить ввод, который должен readOnly выбрать, он выдает ту же ошибку, есть ли способ заставить это readOnly работать или есть обходной путь, чтобы отключить сохранение данных внутри handleSubmit ?

1. Только для чтения не поддерживается в select см. Здесь: developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly . Это не проблема с формой ответа, это типографский текст, обеспечивающий спецификацию HTML

2. Итак, можете ли вы подсказать, как я могу справиться с этой проблемой, есть ли способ использовать отключенные и при этом сохранять значения в форме крючка реакции

3. Как насчет того, чтобы в случае props.disabled===true отображения данных просто в виде простого текстового узла (или отключенного ввода текста) вместо элемента select? И с целью передачи значения в API, используя <input type="hidden" id="{props.field_id}" value={value}> ?

Ответ №1:

disabled Атрибут не удаляет поле react-hook-form при отправке. Если вы не разрешаете пользователю редактировать значение, вы можете использовать его:

 // category field is still registered even when set disabled.
<select {...register("category")} disabled>

В случае, если вы действительно хотите удалить поле из отправленного значения, установите disabled его при вызове register с помощью собственного API RHF:

 <input {...register("firstName", { disabled: true })}

1. С моей командой мы решили просто настроить api, чтобы он принимал только те поля, которые не отключены, что имеет смысл, но ваш ответ, похоже, работает так, как я хотел, поэтому я отмечу это как решение, спасибо!