Блог

Сегодня я впервые пробую react-hook-form (до сих пор использовал formik). Я следил за всем в соответствии с документами. Все еще получаю ошибки, говорящие: «Функциональным компонентам не могут быть присвоены ссылки. Попытки получить доступ к этой ссылке завершатся неудачей. Вы имели в виду использовать React.forwardRef()?», а также, когда я нажимаю «Отправить», значение не отображается. ‘HookFormControl’ — это пользовательский элемент ввода, который был импортирован.

 import { useForm } from 'react-hook-form'
import HookFormControl from '../forms/HookFormControl'

const { register, handleSubmit, errors, reset } = useForm()
const onSubmit = submittedData => { console.log('submittedData = ', submittedData) }

<form onSubmit={handleSubmit(onSubmit)}>
 <div className='row'>
  <div className='col-12'>
    <HookFormControl type='text' label='Site Name *' name='site' ref={register({required: true})} />
  </div>
 </div>

<div className='row'>
  <div className='col-12'>
    <button type='submit'>Create</button>
  </div>
 </div>
</form>
 

1. убедитесь, что HookFormControl этот компонент предоставляет входные данные ref

https://react-hook-form.com/get-started#Integratinganexistingform

 // you can use React.forwardRef to pass the ref too
const Select = React.forwardRef(({ label }, ref) => ( 
  <>
    <label>{label}</label>
    <select name={label} ref={ref}>
      <option value="20">20</option>
      <option value="30">30</option>
    </select>
  </>
));
 

2. вы можете использовать Controller для обертывания вашего контролируемого компонента

https://react-hook-form.com/get-started#IntegratingControlledInputs

 import React from "react";
import { useForm, Controller } from "react-hook-form";
import ReactSelect from "react-select";
import { TextField, Checkbox } from "@material-ui/core";

function App() {
  const methods = useForm();
  const { handleSubmit, control, reset } = methods;
  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* Option 1: pass a component to the Controller. */}
      <Controller as={TextField} name="TextField" control={control} defaultValue="" />
      
      {/* Option 2: use render props to assign events and value */}
      <Controller
        name="MyCheckbox"
        control={control}
        defaultValue={false}
        rules={{ required: true }}
        render={props =>
          <Checkbox
            onChange={e => props.onChange(e.target.checked)}
            checked={props.value}
          />
        } // props contains: onChange, onBlur and value
      />
    </form>
  );
}