react-hook-form. register не получает данные

Question

import React, {useEffect, useState} from "react";
import s from './CalculateForm.module.css';
import { useForm } from 'react-hook-form';
import { NavLink } from "react-router-dom";

const InsuranceItemContext = React.createContext('default');

export default function CalculateForm (props) {
    const [coverageValue, setCoverageValue] = useState(props.coverageMin);
    const [price, setPrice] = useState(0);
    const {register, handleSubmit} = useForm();

    useEffect(() => {
        setPrice(coverageValue * props.risk);
    })

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

    return (
        <InsuranceItemContext.Provider value={props.risk}>
            <form onSubmit={handleSubmit(onSubmit)}>
                <div className={s.calcForm + ' font'}>
                    <div className={s.block1}>
                        <div>Coverage:</div>
                        <input onChange={(e) => setCoverageValue(e.target.value)} type='range' name='price-range' className={s.range} value={coverageValue} min={props.coverageMin} max={props.coverageMax} />
                        <div>Risk: {props.risk}%</div>
                    </div>
                    <div className={s.block2}>
                        <input onChange={(e) => setCoverageValue(e.target.value)} type='text' name='text' className={s.textField} value={coverageValue} {...register('coverage')} />
                    </div>
                    <div className={s.block3}>
                        <input type='hidden' name='text-price' className={s.textDefault} value={price} {...register('price')}/>
                        Price: {price}$
                    </div>
                    <div>
                        <NavLink to='#'>
                            <input type='submit' name='submit' className='submit' />
                        </NavLink>
                    </div>
                </div>
            </form>
            {console.log(`${price}`)}
        </InsuranceItemContext.Provider>
    
    );
}

Это код компонента, который имеет в себе форму. Подсмотрел видео-туториал как воспользоваться библиотекой react-hook-forms, потому что "это так просто". Вроде как всё получилось, но есть один нюанс: register не получает данные, которые имеет форма. Вместо любых чисел, которые там есть выходит вот такой результат:

Как видите значение coverage: 0, а должно быть 2500, так же и со значением price, которое вычисляется. Из-за чего возникают такие трудности и как их исправить?

Answer 1

Нужно собрать данные и перекинуть на другой компонент, который даже не является родительским. Для сбора данных, я хотел использовать формы, но как мне подсказали в комментарии - это излишество.

Тогда я создал контекст, а так же своего рода хранилище, которое обёртывало всё приложение:

import { InsuranceItemContext } from './Context/InsuranceItemContext';

function App() {
  const [state, dispatch] = React.useReducer(null);

  return (
    <BrowserRouter>
      <InsuranceItemContext.Provider value={{state, dispatch}}>
        <div className='App'>
          <Header />
          <Section />
          <Footer />
        </div>
      </InsuranceItemContext.Provider>
    </BrowserRouter>
  );
}

А для того, чтобы данные в хранилище можно было изменить в дочерних компонентах было принято решение использовать useReducer() и передать состояние и ф-цию в дочерние компоненты.

Таким образом я решил проблему сбора данных в компоненте, который был приведён изначально в вопросе. Поскольку передавал данные по нажатию кнопки в глобальное состояние через dispatch.

import { InsuranceItemContext } from "../../../../Context/InsuranceItemContext";

export default function CalculateForm(props) {
    const {state, dispatch} = useContext(InsuranceItemContext);

    return (
        { /*some code*/}
        <input onClick={() => dispatch({
            coverage: coverageValue,
            risk: props.risk,
            price,
            title: props.title
        })} type='submit' name='submit' className='submit' />
        { /*some code*/}
    );
}

БЛОГ НА HUSL

react-hook-form. register не получает данные

Ответы (1 шт):