Добавление 3 полей вместе в React

Question

Я пытаюсь получить входные данные из 3 полей в React, а затем выполняю некоторую скрытую математику. На всю жизнь я не могу добавить 3-е поле (partprice) к остальным, надеясь, что кто-то сможет увидеть, что я делаю неправильно. Я могу получить все 3 поля в console.log со значениями событий, но когда математика завершится, третье поле всегда отсутствует.

import React, { useState, userForm } from "react";
import moment from "moment";

export default function Form() {
  const [labor, setLabor] = useState("");
  const [mileage, setMileage] = useState("");
  const [partprice, setPartPrice] = useState("");
  const [finalRate, setFinalRate] = useState("");

  const cancelCourse = () => {
    console.log("canceCourse Link 10 form.JS");
    setLabor("");
    setMileage("");
    setPartPrice("");
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    let hourlyRate = labor * 80 + (mileage * 0.085 + 7.5) + partprice;
    let roundedRate = Math.round(hourlyRate * 100) / 100;
    setFinalRate(roundedRate);
    cancelCourse();
  };

  const changeLabor = (event) => {
    setLabor(event.target.value);
  };

  const changeMileage = (event) => {
    setMileage(event.target.value);
  };

  const changePartPrice = (event) => {
    setPartPrice(event.target.value);
  };

  return (
    <div className="page">
      <form id="create">
        <input
          className="form-input"
          id="date"
          placeholder={moment().format("dddd")}
        ></input>
        <input
          className="form-input"
          id="link"
          value={labor}
          placeholder="Enter Labor/Travel Time"
          onChange={changeLabor}
        ></input>
        <input
          className="form-input"
          id="comment"
          value={mileage}
          placeholder="Enter Miles Traveled"
          onChange={changeMileage}
        ></input>
        <input
          className="form-input"
          id="tags"
          value={partprice}
          placeholder="Enter Parts Price"
          onChange={changePartPrice}
        ></input>
        <button className="submit" onClick={handleSubmit}>
          Submit
        </button>
      </form>
      <div className="finalrate">
        <h1>{finalRate}</h1>
      </div>
    </div>
  );
}

Answer 1

Ваш код обрабатывает number как строковое значение и объединяет его до конца вычисления. Вместо ...

labor * 80 + (mileage * 0.085 + 7.5) + partprice;

Попробуйте ...

labor * 80 + (mileage * 0.085 + 7.5) + Number(partprice);

Есть много способов выполнить проверку, но это просто пример дает вам представление о том, что происходит.

Answer 2

Вы можете немного очистить свой код ...

Вот пользовательский хук для обработки вашей формы:

import { useState } from 'react';

export const useForm = (initialValues) => {
  const [values, setValues] = useState(initialValues);

  return {
    values,
    handleChange: (e) => {
      setValues({
        ...values,
        [e.target.name]: e.target.value,
      });
    },
    reset: () => setValues(initialValues),
  };
};

Затем вы можете использовать его в своем компоненте следующим образом:

import React, { useState } from "react";
import moment from "moment";

import { useForm } from "./useForm"; //import it here

export default function Form() {
  const { values, handleChange, reset } = useForm({
    labor: "",
    milage: "",
    partprice: ""
  }); //use it here

  const [finalRate, setFinalRate] = useState("");

  const handleSubmit = event => {
    event.preventDefault();
    let hourlyRate = values.labor * 80 + (values.milage * 0.085 + 7.5) + parseInt(values.partprice);
    let roundedRate = Math.round(hourlyRate * 100) / 100;
    setFinalRate(roundedRate);
    reset();
  };

  return (
    <div className="page">
      <form id="create" onSubmit={handleSubmit}>
        <input
          className="form-input"
          id="date"
          placeholder={moment().format("dddd")}
        />
        <input
          className="form-input"
          id="link"
          name="labor"
          value={values.labor}
          placeholder="Enter Labor/Travel Time"
          onChange={handleChange}
        />
        <input
          className="form-input"
          id="comment"
          name="milage"
          value={values.milage}
          placeholder="Enter Miles Traveled"
          onChange={handleChange}
        />
        <input
          className="form-input"
          id="tags"
          name="partprice"
          value={values.partprice}
          placeholder="Enter Parts Price"
          onChange={handleChange}
        />
        <button className="submit">Submit</button>
      </form>
      <div className="finalrate">
        <h1>{finalRate}</h1>
      </div>
    </div>
  );
}

Живая демонстрация: https://stackblitz.com/edit/react-7ylsha?file=index.js