點擊提交按鈕，執行 function 然后提交表單 react.js

Question

我有一個訂單表格，目前接受用戶輸入並在提交時將其發布到 dynamo db 表中。

現在，這就是“提交”按鈕所做的一切。

我希望點擊后根據用戶輸入計算價格，隱藏表單，使用“接受和安排”按鈕顯示價格，然后發布到 dynamo db。

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

我想我的 function 來處理計算看起來像下面這樣，因為價格是基於以 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>
    );
  }
}

那么我將如何使用 go 而不是 on submit 觸發 function 根據用戶輸入計算價格，隱藏表單，使用“接受和安排”按鈕顯示價格，然后發布到 dynamo db？

如果有人可以分享一些資源或關於我應該如何執行 go 的見解，那將非常感激！

計算調試器的圖像：

物業面積 5000

超額3000

百分比為零？

當設置為 5001 平方英尺時，百分比只有 10？

Answer 1

在 state 中，有一個名為totalPrice的值，在 null 處初始化，並添加一個 function 在官方onSubmit之前遇到。 它可能看起來像這樣。

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

在您的渲染中，有一個條件，如果totalPrice然后顯示價格和兩個按鈕（ continue ，它將執行表單提交，或back ，它將執行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>

這是一個快速代碼沙箱。 該代碼可能與您的代碼沒有 100% 匹配，但它應該足以為您指明正確的方向。

或者，您可以查看 Ant Design 的Popconfirm組件。 基本上你將它包裹在任何將要被點擊的東西（即提交按鈕）並且在它提交任何東西之前，組件將呈現一個彈出窗口。 您可以使用“Your price is...”填充彈出窗口並計算最終價格。 然后傳遞道具onConfirm={YOUR_SUBMIT_FUNCTION} onCancel={()=>{this.setState({totalPrice: null})}}