#javascript #css #reactjs #mongodb #draggable
Вопрос:
У меня есть часть функции в моем проекте, где пользователь может настроить свою пригласительную карточку, изменив текст по умолчанию и имея возможность разместить текст в любом месте по желанию пользователя. Поэтому, когда пользователь помещает текст в определенную область, я хочу сохранить его значения полей в базе данных, а также при его извлечении, он должен отображаться в одном и том же месте.Я использовал перетаскиваемую библиотеку 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;