[英]React onSubmit Button To POST Not Working
I have a Modal component with a Form and Button in it.我有一个带有表单和按钮的模态组件。 When the user clicks on the button, I want to populate a POST request (handled in a separate file) which runs a simulation from the validated values.当用户单击按钮时,我想填充一个 POST 请求(在单独的文件中处理),该请求从验证值运行模拟。 If I use the onClick
Button prop it prints "triggered" and the request to the console but not if I use onSubmit
.如果我使用onClick
按钮道具,它会打印“已触发”并将请求打印到控制台,但如果我使用onSubmit
则不会。 This is the file:这是文件:
import React, { useState, useEffect } from "react";
import { Button, Modal, FormFile, Form } from "react-bootstrap";
import * as ratingsApi from "../api/ratingsApi";
import PostBody from "../api/model/body.json";
import { loadRatings, saveRatings } from "../actions/Actions";
import ratingsStore from "../stores/ratingsStore";
export const RunSimsModal = props => {
const [numberofSims, setNumberOfSims] = useState("");
const [simName, setSimName] = useState("");
const runSims = () => {
console.log("triggered");
ratingsApi.runSimulation(
PostBody.clientId,
simName,
numberofSims,
PostBody.initialValues,
PostBody.initialOverrides,
PostBody.initialId
);
};
return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Run Simulations
</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Run Sims</h4>
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Label>Number Of Simulations</Form.Label>
<Form.Control
required
type="text"
placeholder="Enter number of sims"
value={numberofSims}
onChange={e => setNumberOfSims(e.target.value)}
/>
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Label>Simulation Name</Form.Label>
<Form.Control
required
type="text"
placeholder="Enter simulation name"
value={simName}
onChange={e => setSimName(e.target.value)}
/>
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Label>Tournament Type</Form.Label>
<Form.Control as="select">
<option>TYPE_OF_SIMULATION</option>
</Form.Control>
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Label>Settings</Form.Label>
<FormFile.Input />
</Form.Group>
<Button type="submit" onSubmit={runSims}>Run</Button>
</Form>
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
);
};
How do I modify <Button type="submit" onSubmit={runSims}>
so that it sends the POST request after validating the values from the <Form>
?如何修改<Button type="submit" onSubmit={runSims}>
以便在验证<Form>
的值后发送 POST 请求?
I guess onSubmit
event should be added to <Form>
component instead of the <Button>
.我猜应该将onSubmit
事件添加到<Form>
组件而不是<Button>
。
Based on the examples from Forms documentation on react-bootstrap :基于react-bootstrap上 Forms 文档中的示例:
<Form onSubmit={runSims}>
{ /* components */ }
</Form>
In the same time the <Button>
component should have:同时<Button>
组件应该有:
<Button type="submit">Run</Button>
Read further about other props in the API section below:在下面的 API 部分中进一步了解其他道具:
https://react-bootstrap.github.io/components/forms/#form-props https://react-bootstrap.github.io/components/forms/#form-props
I hope this helps!我希望这有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.