Javascript 单击submit按钮，执行函数，然后提交表单react.js_Javascript_Reactjs_React Router_Conditional Statements_Conditional Rendering

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

javascript reactjs

Javascript 单击submit按钮，执行函数，然后提交表单react.js,javascript,reactjs,react-router,conditional-statements,conditional-rendering,Javascript,Reactjs,React Router,Conditional Statements,Conditional Rendering,我有一个订单，当前接受用户输入，并在提交时将其发布到dynamo db表中现在，这就是“提交”按钮的全部功能我希望点击后根据用户输入计算价格，隐藏表单，用“接受并安排”按钮显示价格，然后发布到dynamo db -----------------I am very new to to react js so I apologize if my code is sloppy. ------------------- 我认为我处理计算的函数如下所示，因为价格以500平方英尺的增量为

我有一个订单，当前接受用户输入，并在提交时将其发布到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>
    );
  }
}

import React，{Component}来自“React”；
从“react bootstrap”导入{InputGroup，Row，Form，Col，FormGroup，FormControl，ControlLabel}；
从“./components/LoaderButton”导入LoaderButton；
从“./config”导入配置；
从“aws放大”导入{API}；
导出默认类OrderForm扩展组件{
建造师（道具）{
超级（道具）；
此.state={
isLoading:null，
街道地址：“，
街道地址2:“”，
城市：“，
州：“，
zipCode:“”，
属性QFT:“”，
packageSelected:this.props.location.state，
};
}
validateForm（）{
返回this.state.streetAddress.length>0；
返回this.state.streetAddress2.legnth>=0；
返回this.state.city.length>0；
返回this.state.state.length>0；
返回this.state.zipCode.length>0；
返回this.state.propertySqft.length>0；
返回this.state.packageSelected.length>0；
}
handleChange=事件=>{
这是我的国家({
[event.target.id]：event.target.value，
});
}
handleSubmit=异步事件=>{
event.preventDefault（）；
this.setState（{isLoading:true}）；
试一试{
等待这份工作({
streetAddress:this.state.streetAddress，
streetAddress2:this.state.streetAddress2，
城市：这个州，这个城市，
州：这个州，
zipCode:this.state.zipCode，
propertySqft:this.state.propertySqft，
packageSelected:this.state.packageSelected，
});
this.props.history.push（“/Scheduled”）；
}捕获（e）{
警报（e）；
this.setState（{isLoading:false}）；
}
}
创建作业（作业）{
返回API.post（“dynamodbname”，“/prapp”{
身体：工作
});
}
render（）{
var centerText={textAlign:“center”}
返回(
所选程序包：
{" "}
地址1
地址2
城市
陈述
陈述
阿拉巴马州
阿拉斯加州
亚利桑那州
阿肯色州
加利福尼亚
科罗拉多州
康涅狄格州
特拉华州
拉链
平方英尺
);
}
}

那么，我该怎么做呢？提交时会触发一个函数，该函数根据用户输入计算价格，隐藏表单，用“接受并计划”按钮显示价格，然后发布到dynamo db

如果有人能分享一些关于我应该如何执行此任务的资源或见解，那将非常感谢

计算调试器的图像：

在状态中，有一个名为

totalPrice

的值，初始化为null，并在正式

onSubmit

之前添加一个get满足的函数。它可能看起来像这样

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

在渲染中，有一个条件表示如果

totalPrice

，则显示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>

{this.state.totalPrice(
你的价格是{this.state.totalPrice}
继续？
{this.setState（{totalPrice:null}}}>返回到Eval
) : (
...

这里有一个简单的例子。代码可能与您的代码不完全匹配，但它应该足以为您指明正确的方向

或者，您可以查看Ant Design的组件。基本上，您可以将其环绕在将要单击的任何内容（即提交按钮）上，在提交任何内容之前，组件将呈现一个弹出窗口。您可以使用“您的价格是…”填充弹出窗口并计算最终价格。然后传递道具

onConfirm={YOUR_SUBMIT_FUNCTION}onCancel={（）=>{this.setState（{totalPrice:null}}}}

处于状态，有一个名为

totalPrice

的值，初始化为null，并添加一个在正式

onSubmit

之前得到满足的函数。它可能看起来像这样

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