Question

我有一个订单，当前接受用户输入并将其提交到dynamo db表中。

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

我希望在单击时根据用户输入来计算价格，隐藏表单，使用“接受并安排”按钮显示价格，然后将其发布到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>
    );
  }
}

那么，我将如何处理on Submit触发一个函数，该函数根据用户输入来计算价格，隐藏表单，使用“接受并安排”按钮显示价格，然后发布到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之前得到满足的函数。可能看起来像这样。

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

在渲染中，必须满足以下条件：如果totalPrice然后显示价格和两个按钮（continue，将执行表单提交，或者back，将执行{{1 }}并再次显示表单。

setState({totalPrice: null})

这里是一个快速的code sandbox。该代码可能与您的代码不匹配100％，但足以使您指向正确的方向。

或者，您可以签出Ant Design的Popconfirm组件。基本上，您将它包装在要单击的内容（即“提交”按钮）周围，并且在提交任何内容之前，组件将呈现一个弹出窗口。您可以在弹出窗口中填写“您的价格是...”，然后计算最终价格。然后传递道具{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>

单击提交按钮后，执行功能，然后提交表格react.js

1 个答案: