对POST执行onSubmit按钮不起作用

Question

我有一个带有窗体和按钮的模态组件。当用户单击按钮时，我想填充一个POST请求（在单独的文件中处理），该请求从验证的值运行模拟。如果我使用onClick按钮道具，它会向控制台输出“触发”和请求，但如果我使用onSubmit，则不会。这是文件：

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>
  );
};

如何修改<Button type="submit" onSubmit={runSims}>，以便在验证Form中的值后发送POST请求？

Answer 1

基于Forms documentation on react-bootstrap中的示例：

<Form onSubmit={runSims}>
   { /* components */ }
</Form>

同时<Button>组件应具有：

<Button type="submit">Run</Button>

我希望这会有所帮助！