反应 onSubmit 按钮 POST 不工作答案

【问题标题】：React onSubmit Button To POST Not Working反应 onSubmit 按钮 POST 不工作
【发布时间】：2020-08-31 23:24:37
【问题描述】：

我有一个模态组件，其中包含一个表单和按钮。当用户单击按钮时，我想填充一个 POST 请求（在单独的文件中处理），该请求从验证值运行模拟。如果我使用onClick Button 道具，它会打印“已触发”并将请求打印到控制台，但如果我使用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 请求？

【问题讨论】：

标签： javascript reactjs rest react-bootstrap flux

【解决方案1】：

我猜应该将onSubmit 事件添加到<Form> 组件而不是<Button>。

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

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

同时<Button> 组件应该有：

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

在下面的 API 部分中进一步了解其他道具：
https://react-bootstrap.github.io/components/forms/#form-props

我希望这会有所帮助！

【讨论】：