Блог

У меня есть часть функции в моем проекте, где пользователь может настроить свою пригласительную карточку, изменив текст по умолчанию и имея возможность разместить текст в любом месте по желанию пользователя. Поэтому, когда пользователь помещает текст в определенную область, я хочу сохранить его значения полей в базе данных, а также при его извлечении, он должен отображаться в одном и том же месте.Я использовал перетаскиваемую библиотеку npm react для перемещения текста.

 function InsertImage() {
  const [editable, setEditable] = useState(false);
  const [card, setCard] = useState({
    cardTitleMarginTop: "",
    cardTitle: "",
    cardSubTitle: "",
    cardPersonName: "",
    images: "",
  });

  function updateImage() {
    axios.post("http://localhost:2000/card/editImage", card);
  }

  return (
    <>
      <div className="container">
        <div
          className="mx-auto "
          style={{
            border: "0px solid #000",
            width: "350px",
            height: "500px",
            marginTop: "5%",
            borderRadius: "10px",
            backgroundImage: `url(${pic1})`,
          }}
        >
          <Draggable>
            <h1
              style={{
                color: "white",
                fontFamily: "Cursive",
                fontStyle: "italic",
              }}
              contentEditable="true"
              id="cardTitle"
              name="cardTitle"
              // onInput={handleCardTitle}
              onInput={(e) => setCard({ ...card, cardTitle: e.currentTarget.textContent })}
            >
              Customize
            </h1>
          </Draggable>
          <p></p>
          <Draggable>
            <h1
              style={{
                color: "white",
                fontFamily: "Cursive",
                fontStyle: "italic",
              }}
              contentEditable="true"
              id="cardSubTitle"
              name="cardSubTitle"
              onInput={(e) => setCard({ ...card, cardSubTitle: e.currentTarget.textContent })}
            >
              Your
            </h1>
          </Draggable>
          <p></p>
          <Draggable>
            <h2
              style={{
                color: "white",
                fontFamily: "Cursive",
                fontStyle: "italic",
              }}
              contentEditable="true"
              id="cardPersonName"
              name="cardPersonName"
              onInput={(e) =>
                setCard({
                  ...card,
                  cardPersonName: e.currentTarget.textContent,
                })
              }
            >
              Card here
            </h2>
          </Draggable>
        </div>
        <FileBase64
          type="file"
          multiple={false}
          onDone={({ base64 }) => {
            setCard({ ...card, images: base64 });
          }}
        />
        <button type="submit" className="btn btn-dark" onClick={updateImage} style={{ marginLeft: "45%", marginTop: "-40%", width: "120px" }}>
          Save Book
        </button>
        <div className="mx-auto">
          <Link to="/">
            <Button className="btn btn-dark" style={{ marginLeft: "45%", marginTop: "-1%" }}>
              Back to Book
            </Button>
          </Link>
          <Link to="/viewImage">
            <Button className="btn btn-dark" style={{ marginLeft: "43%", marginTop: "1%" }}>
              View Stored Image
            </Button>
          </Link>
        </div>
      </div>
    </>
  );
}

export default InsertImage;
 

и код извлечения приведен ниже

 class ViewEditedImage extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  state = {
    cards: [], 
  };

  componentDidMount() {
    axios
      .get("http://localhost:2000/card/viewImage")
      .then((res) => {
        console.log(res.data);
        this.setState({ cards: res.data });
      })
      .catch((err) => err.message);
  }

  render() {
    return (
      <div
        className="mx-auto "
        style={{
          border: "0px solid #000",
          width: "350px",
          height: "500px",
          marginTop: "5%",
          borderRadius: "20px",
        }}
      >
        {this.state.cards.map((cards) => {
          if (cards) {
            return (
              <>
                <img style={{ objectFit: "cover" }} src={cards.images} />
                <Draggable>
                  <h1
                    style={{
                      position: "relative",
                      // marginTop: cards.cardTitleMarginTop,
                      marginTop: "-100%",
                      color: "white",
                    }}
                  >
                    {cards.cardTitle}
                  </h1>
                </Draggable>
                <Draggable>
                  <h1
                    style={{
                      color: "white",
                      fontFamily: "Cursive",
                      fontStyle: "italic",
                      marginTop: "-5%",
                    }}
                  >
                    {cards.cardSubTitle}
                  </h1>
                </Draggable>
                <Draggable>
                  <h2
                    style={{
                      color: "white",
                      fontFamily: "Cursive",
                      fontStyle: "italic",
                    }}
                  >
                    {cards.cardPersonName}
                  </h2>
                </Draggable>
              </>
            );
          }
        })}
      </div>
    );
  }
} export default ViewEditedImage;