Bom dia pessoal!! Tenho um formulário, no botão de salvar os dados do mesmo eu chamo um componente modal perguntando se o usuário deseja de fato realizar a operação. A dúvida é: Não sei como chamar a função de salvar no botão "sim" do modal caso o usuário deseja salvar a operação.
Segue os códigos:
Código do Formulário:
import React, { useState, useEffect } from 'react';
import useApi from '../../utils/useApi'
import { useHistory } from 'react-router-dom'
import Modal from '../../modals/modal'
import './Form.css'
const initialValue = {
title: "",
url: "",
imageUrl: "",
price: 0,
}
const PromotionForm = ({ id }) => {
const [values, setValues] = useState(id ? null : initialValue)
const [isModalVisible, setisModalVisible] = useState(false)
const history = useHistory()
const [load] = useApi({
url: `/promotions/${id}`,
method: 'get',
onCompleted: (res) => {
setValues(res.data)
}
})
const [save, saveInfo] = useApi({
url: id
? `promotions/${id}`
: '/promotions',
method: id ? 'put' : 'post',
onCompleted: (res) => {
if (!res.error) {
history.push('/')
}
}
})
useEffect(() => {
if (id) {
load()
}
}, [id])
function onChange(ev) {
const { name, value } = ev.target
//console.log({name, value})
setValues({ ...values, [name]: value })
}
function onSubmit(ev) {
ev.preventDefault()
save({
data: values
})
}
return (
<div>
<h1> Site Promoção </h1>
<h2> Nova Promoção </h2>
{!values
? (
<div>Carregando...</div>
) : (
<form onSubmit={onSubmit}>
{saveInfo.loading && <span>Salvando Dados...</span>}
<div className="promotion-form__group">
<label htmlFor="title">Título</label>
<input
id="title"
name="title"
type="text"
onChange={onChange}
value={values.title}
/>
</div>
<div className="promotion-form__group">
<label htmlFor="url">Link</label>
<input
id="url"
name="url"
type="text"
onChange={onChange}
value={values.url}
/>
</div>
<div className="promotion-form__group">
<label htmlFor="imageUrl">Imagem (URL)</label>
<input
id="imageUrl"
name="imageUrl"
type="text"
onChange={onChange}
value={values.imageUrl}
/>
</div>
<div className="promotion-form__group">
<label htmlFor="price">Preço</label>
<input
id="price"
name="price"
type="number"
onChange={onChange}
value={values.price}
/>
</div>
<div className="app">
{/* <button type="submit" className=""> Salvar </button> */}
<button type="button" onClick={() => setisModalVisible(true)}> Salvar </button>
{isModalVisible ? (
<Modal onClose={() => { setisModalVisible(false) }}> </Modal>
)
: null}
</div>
</form>
)}
</div>
);
}
export default PromotionForm;
Código do Modal:
import React from 'react'
import './Styles.scss'
const Modal = ({ onClose = () => {}, Children }) => {
return (
<div className="modal" onClick={onClose}>
<div className="container">
<button className="x" onClick={onClose}></button>
<div className="content"> <h1> Deseja Salvar? </h1> </div>
<button className="closeModal" >Sim</button>
<button className="closeModal" onClick={onClose}>Não</button>
</div>
</div>
)
}
export default Modal