时间戳

首页 > 解决方案 > 无法在带有状态的 React 模式中编辑文本以编辑任务标题和正文

reactjs - 无法在带有状态的 React 模式中编辑文本以编辑任务标题和正文

问题描述

我想知道是否有其他人在 Bootstrap React Modal 中成功地编辑了文本并且可以分享一些智慧。一旦用户单击任务标题，我将使用 Bootstrap React Modal 来显示数据。数据显示精美，但用户无法编辑数据。光标变为编辑光标，但没有多少键盘敲击得到编辑。我尝试添加一个 Bootstrap React 表单，如下所示。当我单击“保存更改”按钮时，我得到了我的 toastify 错误。

import React, { useState } from "react";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import Modal from "react-bootstrap/Modal";
import taskAPI from "../../utils/taskAPI";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import "./style.css";

function TaskModal({ onHide, onTaskUpdated, task }) {
  const [title, setTitle] = useState("");
  const [textBody, setTextBody] = useState("");
  const [isPending, setIsPending] = useState(false);

  const notify = () => toast.warn("You cannot save an empty task!");

 const updateTask=(event)=> {
    event.preventDefault();
    setIsPending(true);
    taskAPI
      .updateTask({ title, textBody })
      .then((response) => {
        response.setTitle("");
        response.setTextBody("");
      })
      .then((response) => {
        onTaskUpdated();
        setIsPending(false);
      })
      .catch((error) => {
        console.log(error);
        setIsPending(false);
        notify();
      });
  }

  return (
    <>
      <Modal show={true} onHide={onHide}>
        <Modal.Header closeButton>
          <Modal.Title>
            <Form>
              <Form.Group controlId="TaskTitleText">
                <Form.Control
                  className="TaskTitleText"
                  as="textarea"
                  size="lg"
                  rows="1"
                  value={task.title}
                  onChange={(event)=> setTitle(event.target.value)}
                />
              </Form.Group>
            </Form>
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form>
            <Form.Group controlId="TaskBodyText">
              <Form.Control
                as="textarea"
                multiple
                value={task.textBody}
                onChange={(event)=> setTextBody(event.target.value)}
              ></Form.Control>
            </Form.Group>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button
            variant="primary"
            value={isPending ? "Saving..." : "Submit"}
            onClick={updateTask}
          >
            Save Changes
            <ToastContainer />
          </Button>
          <Button variant="secondary"
           value={isPending ? "Saving..." : "Submit"}
           onClick={onHide}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

export default TaskModal;

标签： reactjsformsbootstrap-modal

解决方案

请注意，您正在设置valuetoForm.Control和task.textBodynot textBody。task.Textbody是从父元素传递到元素的道具，而是您在函数中实际更新taskBody的本地状态（来自）。useState("")onChange

您可能想要管理父组件中的状态，在这种情况下，您可以传递一个onChange方法，该方法可以在文本更改时调用该组件。

推荐阅读