提交按钮不会改变我的数据状态？

Question

我有这个组件，我在其中从充当休息 API 的 JS 文件中获取数据。到目前为止，一切正常。数据显示在具有一些属性的表上，然后单击一行触发带有项目详细信息的模式，我希望能够在其中更新数据，这就是我苦苦挣扎的地方，我觉得有些奇怪使用我的 handleSubmit 函数，我不确定到底是什么。 我将不胜感激任何正确方向的帮助，谢谢。 我想要做的就是能够使用我的 PUT 请求更新数据，忽略我没有使用 axios 或 fetch 的事实，因为我不知道如何使用那些当我实际上没有使用带有端点的 api 时。

import React, { useEffect, useState } from "react";
import { api } from "../api/api.min.js";
import BootStrapTable from "react-bootstrap-table-next";
// import InfoButton from "../InfoButton/InfoButton.js";
import { Modal, Button } from "react-bootstrap";
// import EditDetails from "../EditDetails/EditDetails";

const ModalContent = ({ eventHandlers, ModalInfo }) => {
  /*
    eventHandlers Object Passed From Parent
    eventHandlers = {
    Change: handleChange,
    Close: handleClose,
    Submit: handleSubmit
    };*/

  return (
    <Modal
      show={
        /* using value of show here is unnecessary because the modal will already be shown when this component is mounted*/ true
      }
      onHide={eventHandlers.Close}
    >
      <Modal.Header closeButton>
        <Modal.Title> Owner: {ModalInfo.id} </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <ul>
          <ol>DATE {ModalInfo.date} </ol>
          <ol>TEXT: {ModalInfo.text} </ol>
          {/* <button onClick={() => selectItem(modalInfo.id)}>Update </button> */}
          <form onSubmit={eventHandlers.Submit}>
            <div className="form-group">
              <label htmlFor="name">textEd</label>
              <input
                type="text"
                name="text"
                value={ModalInfo.text}
                onChange={eventHandlers.Change}
                className="form-control"
                id="id"
              />
            </div>

            <button
              onClick={eventHandlers.handleSubmit}
              type="submit"
              className="btn btn-primary"
            >
              Submit
            </button>
          </form>
        </ul>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={eventHandlers.Close}>
          close
        </Button>
      </Modal.Footer>
    </Modal>
  );
};
function ItemComponent() {
  const [data, setData] = useState([]);
  const [modalInfo, setModalInfo] = useState({});
  const [, setShowModal] = useState([]);
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  useEffect(() => {
    const x = api.XMLHttpRequest();
    x.onreadystatechange = function () {
      if (x.readyState == 4 && x.status == 200) {
        var item = JSON.parse(this.responseText);
        // console.log(x.responseText);
        var items = []; // init array
        for (var i = 0; i < item.length; i++) {
          items.push({
            date: item[i].date,
            text: item[i].text,
            id: item[i].id,
            status: item[i].active,
          });
        }

        setData(items); // <-- here you can set your state
      }
    };
    x.open("GET", "/getitems", true);
    x.send();
  }, []);

  // Why is the button not submitting and sending the data and the modal refreshes on every buttonclick?
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(modalInfo.text, "in submit");
    const editData = () => {
      var json = JSON.stringify(modalInfo);
      var url = "/putitem";
      const id = modalInfo.id;

      // var json = JSON.stringify(modalInfo);
      const xhr = api.XMLHttpRequest();
      xhr.open("PUT", url + id, true);
      xhr.setRequestHeaders("Content-Type", "application/json");
      xhr.onreadystatechange = function () {
        // console.log("done");
      };
      xhr.send(json);
    };

    editData();
    // setData();
  };

  const columns = [
    {
      dataField: "text",
      text: "Text",
      headerStyle: () => {
        return { maxWidth: "40%" };
      },
    },
    { dataField: "date", text: "Date" },
    { dataField: "id", text: "Owner" },
    { dataField: "status", text: "Status" },
  ];

  const rowEvents = {
    onClick: (e, row) => {
      // console.log(row); // loggar den row i console
      setModalInfo(row);
      toggleTrueFalse();
    },
  };

  const toggleTrueFalse = () => {
    setShowModal(handleShow);
  };

  const handleChange = ({ target }) => {
    const { name, value } = target;
    setModalInfo({ ...modalInfo, [name]: value });
    console.log(modalInfo, " works? ");
  };
  // An Object Which Will Be Passed To Modal Component
  const ModalEventHandlers = {
    Change: handleChange,
    Close: handleClose,
    Submit: handleSubmit,
  };
  return (
    <div>
      {/* {dataList} */}
      <h1>DataList</h1>

      <div>{/* <input type="text" value={data[0].text}></input> */}</div>

      {/* <EditDetails /> */}
      <BootStrapTable
        keyField="id"
        data={data}
        columns={columns}
        rowEvents={rowEvents}
      />

      {show && (
        <ModalContent
          eventHandlers={ModalEventHandlers}
          ModalInfo={modalInfo}
        />
      )}
    </div>
  );
}

export default ItemComponent;

Answer 1

eventHandler 对象中没有 handleSubmit 键。

尝试更改为：

<button
   onClick={eventHandlers.Submit}
   type="submit"
   className="btn btn-primary">

Answer 2

您需要按照您的定义调用 eventHandlers.Submit，而不是 eventHandlers.handleSubmit