Блог

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

Я доволен тем, что заставляет его работать на данном этапе — это в основном для того, чтобы продемонстрировать мои дизайнерские способности. Взгляните на скриншот внизу, чтобы увидеть страницу.

 import React, { useState } from "react";
import {
  Button,
  Form,
  Card,
  Header,
  Image,
  Input,
  Divider,
  Icon,
} from "semantic-ui-react";
import useLocalStorage from "../Hooks/useLocalStorage";

function Create() {
  // STATE
  const [values, setValues] = useLocalStorage("values", {
    building: "",
    unit: "",
    issue: "",
    material: "",
    materialCost: "",
    sqftNeeded: "",
    labourHours: "",
    labourCost: "",
    inclusiveCost: "",
  });

  // HANDLERS
  const handleBuildingInputChange = (event) => {
    event.persist();
    setValues((values) => ({
      ...values,
      building: event.target.value,
    }));
  };
  const handleUnitInputChange = (event) => {
    event.persist();
    setValues((values) => ({
      ...values,
      unit: event.target.value,
    }));
  };
  const handleIssueInputChange = (event) => {
    event.persist();
    setValues((values) => ({
      ...values,
      issue: event.target.value,
    }));
  };
  // const handleMaterialInputChange = (event) => {
  //   event.persist();
  //   setValues((values) => ({
  //     ...values,
  //     material: event.target.value,
  //   }));
  // };
  // const handleMaterialCostInputChange = (event) => {
  //   event.persist();
  //   setValues((values) => ({
  //     ...values,
  //     materialCost: event.target.value,
  //   }));
  // };
  // const handleSqftNeededInputChange = (event) => {
  //   event.persist();
  //   setValues((values) => ({
  //     ...values,
  //     sqftNeeded: event.target.value,
  //   }));
  // };
  const handleLabourHoursInputChange = (event) => {
    event.persist();
    setValues((values) => ({
      ...values,
      labourHours: event.target.value,
    }));
  };
  const handleLabourCostInputChange = (event) => {
    event.persist();
    setValues((values) => ({
      ...values,
      labourCost: event.target.value,
    }));
  };
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(values);
  };
  const [inputList, setInputList] = useState([
    { material: "", materialCost: "", sqft: "" },
  ]);

  // handle input change
  const handleInputChange = (e, index) => {
    const { name, value } = e.target;
    const list = [...inputList];
    list[index][name] = value;
    setInputList(list);
  };

  // handle click event of the Remove button
  const handleRemoveClick = (index) => {
    const list = [...inputList];
    list.splice(index, 1);
    setInputList(list);
  };

  // handle click event of the Add button
  const handleAddClick = () => {
    setInputList([...inputList, { material: "", materialCost: "", sqft: "" }]);
  };
 

  // JSX
  return (
    <div className="estimate_form">
      <Button
        style={{ marginTop: "50px" }}
        size="tiny"
        circular
        inverted
        type="submit"
        as="a"
        href="/"
      >
        <Image centered src="./logo.png" alt="logo" />
      </Button>
      <Divider className="top-divider" horizontal>
        <Header as="h2">
          Repair Cost Estimator
          <Header.Subheader>Fill in all available fields.</Header.Subheader>
        </Header>
      </Divider>
      <br />

      {/* FORM */}
      <Form size="larg" onSubmit={handleSubmit}>
        {/* LINE 1 */}
        <Form.Group widths="equal">
          <Form.Field
            onChange={handleBuildingInputChange}
            value={values.building}
          >
            <label>Building</label>
            <Input placeholder="Building" />
          </Form.Field>
          <Form.Field onChange={handleUnitInputChange} value={values.unit}>
            <label>Unit</label>
            <Input placeholder="Unit" />
          </Form.Field>
        </Form.Group>

        {/* LINE 2 */}
        <Form.Field onChange={handleIssueInputChange} value={values.issue}>
          <label>Issue</label>
          <Input placeholder="Issue" />
        </Form.Field>
        <br />
        {/* LINE 3 */}

        <div className="App">
          {inputList.map((values, i) => {
            return (
              <div>
                <Form.Group widths="equal">
                  <Form.Field
                    value={values.material}
                    onChange={(e) => handleInputChange(e, i)}
                  >
                    <label>Material</label>
                    <Input name="material" placeholder="Material" />
                  </Form.Field>
                  <Form.Field
                    value={values.materialCost}
                    onChange={(e) => handleInputChange(e, i)}
                  >
                    <label>Material Cost per SqFt</label>
                    <Input
                      type="number"
                      icon="dollar sign"
                      iconPosition="left"
                      name="Material Cost"
                      placeholder="Material Cost"
                    />
                  </Form.Field>
                  <Form.Field
                    value={values.sqft}
                    onChange={(e) => handleInputChange(e, i)}
                  >
                    <label>SqFt Needed</label>
                    <Input
                      type="number"
                      name="SqFt Needed"
                      placeholder="SqFt Needed"
                    />
                  </Form.Field>
                  <div className="add_remove_btns">
                    <br />
                    {inputList.length - 1 === i amp;amp; (
                      <Button size="mini" positive onClick={handleAddClick}>
                        Add
                      </Button>
                    )}
                    {inputList.length !== 1 amp;amp; (
                      <Button
                        size="mini"
                        negative
                        onClick={() => handleRemoveClick(i)}
                      >
                        Remove
                      </Button>
                    )}
                  </div>
                </Form.Group>
              </div>
            );
          })}
        </div>
        <br />
        {/* LINE 6 */}
        <Form.Group widths="equal">
          <Form.Field
            onChange={handleLabourHoursInputChange}
            value={values.labourHours}
          >
            <label>Labour Hours</label>
            <Input type="number" placeholder="Labour Hrs" />
          </Form.Field>
          <Form.Field
            onChange={handleLabourCostInputChange}
            value={values.labourCost}
          >
            <label>Labour Cost Per Hour</label>
            <Input
              type="number"
              icon="dollar sign"
              iconPosition="left"
              placeholder="Labour Cost"
            />
          </Form.Field>
        </Form.Group>
        <br />
        <Divider horizontal>
          <Header as="h4">
            <Icon name="calculator" />
            Cost Calculator
          </Header>
        </Divider>
        <Card centered>
          {/* <Card.Content header="Cost Calculator" /> */}
          <Card.Content>
            Material Cost: ${values.materialCost * values.sqftNeeded}
          </Card.Content>
          <Card.Content>
            Labour Cost: ${values.labourHours * values.labourCost}
          </Card.Content>
          <Card.Content
            // onChange={handleInclusiveCostChange}
            value={values.inclusiveCost}
          >
            All inclusive cost: $
            {values.materialCost * values.sqftNeeded  
              values.labourHours * values.labourCost}
          </Card.Content>
        </Card>
        <Button
          onClick={() => window.location.reload(false)}
          type="submit"
          inverted
        >
          Save
        </Button>
      </Form>
      <br />
      <br />
    </div>
  );
}
export default Create;

/* <div className="container">
          <Button color="green">Add Line</Button>
          <Form.Group widths="equal">
            <Form.Field
              onChange={handleMaterialInputChange}
              value={values.material}
            >
              <label>Material</label>
              <input placeholder="Material" />
            </Form.Field>
            <Form.Field
              onChange={handleMaterialCostInputChange}
              value={values.unit}
            >
              <label>Material Cost per SqFt</label>
              <Input
                icon="dollar sign"
                iconPosition="left"
                placeholder="Material Cost"
              />
            </Form.Field>
            <Form.Field
              onChange={handleSqftNeededInputChange}
              value={values.unit}
            >
              <label>SqFt Needed</label>
              <input placeholder="SqFt Needed" />
            </Form.Field>
          </Form.Group>
        </div>  */
 

скриншот