javascript - 单击提交按钮，执行函数然后提交表单react.js

Question

我有一个订单表单，当前接受用户输入并在提交时将其发布到 dynamo 数据库表中。

现在，这就是“提交”按钮的全部功能。

我希望点击时根据用户输入计算价格，隐藏表单，使用“接受并计划”按钮显示价格，然后发布到 dynamo 数据库。

      -----------------I am very new to to react js so I apologize if my code is sloppy. -------------------

我认为处理计算的函数如下所示，因为价格基于特性平方英尺，以 500 为增量。

let base_price = 149.99; 
if(sqft > 2000){
  let overage = sqft - 2000;
  let percentage = Math.ceil(overage % 500) * 10;
  base_price += base_price * percentage;
}

现在这是我当前的订单表格代码:

import React, { Component } from "react";
import { InputGroup, Row, Form, Col, FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import LoaderButton from "../components/LoaderButton";
import config from "../config";
import { API } from "aws-amplify";


export default class OrderForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: null,
      streetAddress: "",
      streetAddress2: "",
      city: "",
      state: "",
      zipCode: "",
      propertySqft: "",
      packageSelected: this.props.location.state,
    };
  }

  validateForm() {
    return this.state.streetAddress.length > 0;
    return this.state.streetAddress2.legnth >= 0;
    return this.state.city.length > 0;
    return this.state.state.length > 0;
    return this.state.zipCode.length > 0;
    return this.state.propertySqft.length > 0;
    return this.state.packageSelected.length > 0;
}

  handleChange = event => {
    this.setState({
      [event.target.id]: event.target.value,

    });


  }

  handleSubmit = async event => {
    event.preventDefault();

  this.setState({ isLoading: true });
  try {
    await this.createJob({
      streetAddress: this.state.streetAddress,
      streetAddress2: this.state.streetAddress2,
      city: this.state.city,
      state: this.state.state,
      zipCode: this.state.zipCode,
      propertySqft: this.state.propertySqft,
      packageSelected: this.state.packageSelected,
    });
    this.props.history.push("/Scheduled");
  } catch (e) {
    alert(e);
    this.setState({ isLoading: false });
  }
}

createJob(job) {
  return API.post("dynamodbname", "/prapp", {
    body: job
  });
}

  render() {
    var centerText = {textAlign: "center"}
    return (
      <div className="NewJob">
        <Form onSubmit={this.handleSubmit}>

    <Form.Group controlId="packageSelected">
      <Form.Label>
      </Form.Label>
        <InputGroup>
            <InputGroup.Prepend>
            <InputGroup.Text id="inputGroupPrepend">Package Selected:</InputGroup.Text>
            </InputGroup.Prepend>{" "}

      <Form.Control style={centerText} onChange={this.handleChange} plaintext readOnly defaultValue={this.props.location.state} />
        </InputGroup>
  </Form.Group>




  <Form.Group controlId="streetAddress">
    <Form.Label>Address 1</Form.Label>
    <Form.Control onChange={this.handleChange} value={this.state.streetAddress} placeholder="Property Address" />
  </Form.Group>

  <Form.Group controlId="streetAddress2">
    <Form.Label>Address 2</Form.Label>
    <Form.Control onChange={this.handleChange} value={this.state.streetAddress2} placeholder="Apartment, studio, or floor" />
  </Form.Group>

  <Form.Row>
    <Form.Group as={Col} controlId="city">
      <Form.Label>City</Form.Label>
      <Form.Control onChange={this.handleChange} value={this.state.city} placeholder="City" />
    </Form.Group>

    <Form.Group as={Col} controlId="state">
      <Form.Label>State</Form.Label>
      <Form.Control onChange={this.handleChange} value={this.state.state} as="select">
    <option value="AL">State</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
      </Form.Control>
    </Form.Group>

    <Form.Group as={Col} controlId="zipCode">
      <Form.Label>Zip</Form.Label>
      <Form.Control onChange={this.handleChange} value={this.state.zipCode} placeholder="Zip Code" />
    </Form.Group>
    </Form.Row>
        <Form.Group controlId="propertySqft">
      <Form.Label>Square Feet</Form.Label>
      <Form.Control onChange={this.handleChange} value={this.state.propertySqft} placeholder="1234" />
    </Form.Group>


  <Form.Group id="formGridCheckbox">
    <Form.Check type="checkbox" label="I agree to terms and services" />
  </Form.Group>

  <LoaderButton
            block
            bsStyle="primary"
            bsSize="large"
            disabled={!this.validateForm()}
            type="submit"
            isLoading={this.state.isLoading}
            text="Calculate Price"
            loadingText="Calculating your price…."
          />
</Form>
      </div>
    );
  }
}

那么我该如何处理，而不是提交时触发一个函数，该函数根据用户输入计算价格，隐藏表单，使用“接受和计划”按钮显示价格，然后发布到 dynamo 数据库？

如果有人可以分享一些资源或关于我应该如何执行此操作的见解，我们将非常感激!

计算调试器的图像:

property sqft is 5000

Overage is 3000

Percentage is Zero?

when set to 5001 sqft, percentage is only 10?

Answer 1

在状态下，有一个名为totalPrice的值，初始化为null，并在官方onSubmit之前添加一个满足get的函数。它可能看起来像这样。

checkPrice = () =>{
    //YOUR PRICE EVAL BASED ON USER INPUT
    this.setState({totalPrice: YOUR_PRICE_EVAL})
}

在您的渲染中，有一个条件，表示如果totalPrice则显示价格和两个按钮(继续，这将执行表单提交，或返回，它将执行 setState({totalPrice: null}) 并再次显示表单。

 {this.state.totalPrice ? (
      <div>
        Your price is {this.state.totalPrice}
        <button onClick={this.handleSubmit}>Continue?</button>
        <button onClick={()=>{this.setState({totalPrice: null})}}>Back to Eval</button>
      </div>
    ) : (
      <Form onSubmit={this.checkPrice}>
         ...
      </Form>

这是一个快速code sandbox 。该代码可能与您的代码不 100% 匹配，但它应该足以为您指明正确的方向。

或者您可以查看 Ant Design 的 Popconfirm成分。基本上，您将它包裹在将要单击的任何内容(即提交按钮)周围，并且在提交任何内容之前，组件将呈现一个弹出窗口。您可以在弹出窗口中填写“您的价格是...”并计算最终价格。然后传递 Prop onConfirm={YOUR_SUBMIT_FUNCTION} onCancel={()=>{this.setState({totalPrice: null})}}