单击“保存”按钮时如何更新草稿值？

问题描述

我有两个输入表单和一个段落，当我尝试更改输入的值时，段落会更新，一旦段落更新，我正在尝试在草稿库的帮助下编辑段落，但是一旦我更新段落并保存它，它不会更新段落。

请大家帮我解决问题

代码沙盒链接：Code

上下文 API

import React,{ useState,createContext } from "react";

export const Contx = createContext();

export const ConProvider = ({ children }) => {
  const [customerName,setCustomerName] = useState("");
  const [amount,setAmount] = useState("");

  const defaultValue = `<p>Hello ${
    customerName === "" ? "User" : customerName
  },</p>
<p>Please Click on the link below to pay the order - <strong>${amount}</strong> . </p>
<p>Click hear to pay</p>
<br/>
<p>Thanks and Regards</p>
<p>testUser</p>`;
  const [draftValue,setDraftValue] = useState(defaultValue);
  return (
    <Contx.Provider
      value={{
        defaultValue,setCustomerName,setAmount,customerName,amount,setDraftValue,draftValue
      }}
    >
      {children}
    </Contx.Provider>
  );
};

主页

import React,{ useContext,useState } from "react";
import ReactDOM from "react-dom";
import { ConProvider,Contx } from "../ContextApi";
import Data from "./Component/Data/Data";
import NewDraft from "./Component/Data/NewDraft";
import Modal from "./Component/Data/Modal";

import "./styles.css";

function App() {
  const { defaultValue,draftValue } = useContext(Contx);
  // console.log("defaultValue",defaultValue);
  const [show,setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  return (
    <div className="App">
      <Data />
      <Modal handleClose={handleClose} show={show}>
        <NewDraft
          prsFunc={setDraftValue}
          handleClose={handleClose}
          defaultValueEmpty={false}
          defaultValue={defaultValue}
        />
      </Modal>

      <div
        className="templateStyle p-2"
        // eslint-disable-next-line react/no-danger
        dangerouslySetInnerHTML={{
          __html: draftValue && draftValue
        }}
      />
      <button onClick={handleShow}>Edit</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <ConProvider>
    <App />
  </ConProvider>,rootElement
);

输入表单

import React,{ useContext } from "react";
import { Contx } from "../../../ContextApi";

export default function Data() {
  const {
    setCustomerName,defaultValue,amount
  } = useContext(Contx);
  React.useEffect(() => {
    setDraftValue(defaultValue);
  });
  // console.log("fffffff",amount);
  return (
    <div>
      <input
        type="text"
        value={customerName}
        name="customerName"
        placeholder="Enter Customer name"
        onChange={(e) => {
          setCustomerName(e.target.value);
        }}
      />
      <input
        type="number"
        placeholder="Enter Amount"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
      />
    </div>
  );
}

DraftJS

import React,{ useState } from "react";
import { Editor } from "react-draft-wysiwyg";
import {
  EditorState,convertToRaw,ContentState,convertFromHTML
} from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import draftToHtml from "draftjs-to-html";
import "./Data.css";

export default function NewDraft({
  handleClose,defaultValueEmpty,prsFunc
}) {
  const initialState = defaultValueEmpty
    ? () => EditorState.createEmpty()
    : EditorState.createWithContent(
        ContentState.createFromBlockArray(convertFromHTML(defaultValue))
      );
  const [editorState,setEditorState] = useState(initialState);

  const onChange = (value) => {
    setEditorState(value);
  };

  const saveData = () => {
    prsFunc(draftToHtml(convertToRaw(editorState.getCurrentContent())));
    handleClose();
  };

  // console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())));

  return (
    <div>
      <div style={{ border: "2px solid",padding: "20px" }}>
        <Editor
          editorState={editorState}
          toolbarClassName="toolbarClassName"
          wrapperClassName="wrapperClassName"
          editorClassName="editorClassName"
          onEditorStateChange={(value) => onChange(value)}
        />
        <button variant="secondary" onClick={saveData}>
          Save
        </button>
      </div>
    </div>
  );
}

解决方法

您面临的问题是由 Data 组件中的这一行引起的。每次更新组件时，draftValue 都会设置为 defaultValue。

  React.useEffect(() => {
     setDraftValue(defaultValue);
  });