У меня есть форма заказа, которая в настоящее время принимает входные данные пользователей и отправляет их в таблицу динамо-базы данных при отправке.
Прямо сейчас, это все, что делает кнопка "отправить".
IЯ хочу, чтобы по щелчку вместо этого вычислялась цена на основе данных, введенных пользователями, скрывалась форма, отображалась цена с помощью кнопки «принять и запланировать», которая затем отправлялась в динамо.
-----------------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>
);
}
}
Итак, как мне поступить, вместо этого при отправке запускается функция, которая рассчитывает цену на основе данных, введенных пользователями, скрывает форму, отображает цену с помощью кнопки «принять и запланировать», а затем публикует сообщенияto Dynamo DB?
Если бы кто-нибудь мог поделиться какими-то ресурсами или понять, как мне следует выполнить это, я был бы очень признателен!
Изображения отладчика расчета:
свойство sqft составляет 5000
Избыток составляет 3000
ПроцентНоль?
при значении 5001 sqft, процент составляет только 10?