javascript - 在提交按钮上单击,执行函数然后提交表单 react.js
问题描述
我有一个订单表格,目前接受用户输入并在提交时将其发布到 dynamo db 表中。
现在,这就是“提交”按钮所做的一切。
我希望点击后根据用户输入计算价格,隐藏表单,使用“接受和安排”按钮显示价格,然后发布到 dynamo db。
-----------------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 db?
如果有人可以分享一些资源或关于我应该如何执行此操作的见解,那将非常感激!
计算调试器的图像:
解决方案
在 state 中,有一个名为 的值totalPrice
,初始化为 null,并添加一个在正式之前遇到的函数onSubmit
。它可能看起来像这样。
checkPrice = () =>{
//YOUR PRICE EVAL BASED ON USER INPUT
this.setState({totalPrice: YOUR_PRICE_EVAL})
}
在您的渲染中,有一个条件表示 if totalPrice
then show price 和两个按钮 ( 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})}}
推荐阅读
- elasticsearch - 如何在 Elasticsearch 中使用无痛脚本获取数组字段的匹配字段值?
- node.js - 将 unix 时间戳插入 postgres 时间戳列 (node-postgres)
- mongodb - 仅在 mongodb 中为动态字段名称项目嵌套对象
- postgresql - 如何将 Apollographql 连接到多个 Postgres 数据库
- javascript - 我的 javascript 代码不适用于工作 php 的结果
- android - RecyclerView 项目未按预期显示
- ios - 如何在自定义表格视图单元格填充和圆角内给出标签
- java - 我们可以在类中初始化 WebDriverWait
- node.js - 导入 uuid 时无法使用导入语法错误
- python - 我遇到了 subprocess.call() python 的问题