0
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 не получает данные, которые имеет форма. Вместо любых чисел, которые там есть выходит вот такой результат: mistake

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

2
  • 3
    а зачем использовать и механизм форм и стэйт компоненты? нужно выбирать что-то одно 23 июл 2021 в 6:18
  • @ИльяПаймушкин, ну мне нужно было связать два инпута между собою, сделать вычисления и отправить данные в корзину при нажатии на кнопку. Я думал отказаться от формы, вы считаете следует так сделать, или, возможно, я вас не правильно понял?
    – Iangyl
    23 июл 2021 в 11:13

1 ответ 1

0

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

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

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*/}
    );
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.