Как в родительском компоненте вызвать функцию из дочернего компонента?
Вложений: 2
У меня есть дочерний компонент таймера, который можно ресетнуть вызовом функции reset:
const CountDown = ({ hours = 0, minutes = 0, seconds = 0, timerStatus, restartTimer }) => { const [paused, setPaused] = useState(false); const [over, setOver] = useState(false); const [[h, m, s], setTime] = useState([hours, minutes, seconds]); const tick = () => { if (paused || over) return; if (h === 0 && m === 0 && s === 0) { setOver(true); } else if (m === 0 && s === 0) { setTime([h - 1, 59, 59]); } else if (s == 0) { setTime([h, m - 1, 59]); } else { setTime([h, m, s - 1]); } }; const reset = () => { // ЭТА САМАЯ ФУНКЦИЯ setTime([parseInt(hours), parseInt(minutes), parseInt(seconds)]); setPaused(false); setOver(false); }; useEffect(() => { const timerID = setInterval(() => tick(), 1000); console.log(s) return () => clearInterval(timerID); }); return ( <input className="count_down" value={ `${s.toString().padStart(2, '0')}` } onChange={ s === 0 ? timerStatus(true) : undefined } /> ); }; И родительский компонент, где я в зависимости от того, прошел таймер или нет отрисовываю другие компоненты, но в родительском компоненте у меня есть кнопка, которая должна по нажатию снова скрыть компоненты и запустить таймер. Надеюсь суть ясна. Нужно через родительский компонент вызвать функцию reset, которая находится в дочернем компоненте. Родительский компонент: import React, { useEffect, useState } from "react"; // helper import { CountDown } from "../helper/count-down"; // import img import backPng from "../../img/free-icon-back-130882.png" const ModalDialog = (props) => { const [statusTimer, setStatusTimer] = useState(false) const [restarTimer, setRestartTimer] = useState(Boolean) const handlerRestartTimer = () => { setRestartTimer(false) } const handlerModalBack = () => { props.modalBack(true) } return ( <> <div className="modal fade" id="checkSMSCode" tabIndex="-1"> <button className="modal_fade_back" onClick={ handlerModalBack } ><img src={ backPng } alt=""/></button> <div className="modal-dialog"> <div className="modal-content"> <div className="modal-header"> <h5 className="modal-title">Подтверждение номера телефона</h5> <button type="button" className="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div className="modal-body text-center"> <div className="alert alert-danger hidden">Ошибка</div> <p>Введите код из SMS, отправленный на номер <span className="phone_num_info">{ props.phoneNumber }</span></p> <form method="POST" className="dnt_sbmt_frm" name="check_form"> <div className="input-box"> <label className="control-label">Код из смс</label> <input type="text" data-required="true" name="modal[sms_code]" maxLength="5" defaultValue="" /> </div> <div className="resend_box"> { statusTimer === true ? (<div className="resend_sms" data-send-page="master_reg" onClick={ handlerRestartTimer } >Отправить код повторно</div> ) : undefined } { statusTimer === false ? <p className="resend_sms_title">Получить код повторно <span className="resend_timer"> <CountDown seconds={5} timerStatus={setStatusTimer} restartTimer={restarTimer} /> </span> сек</p> : undefined} // ТОТ САМЫЙ ДОЧЕРНИЙ КОМПОНЕНТ </div> <button type="button" className="btn btn-secondary" onClick={ handlerModalBack } >Изменить номер телефона</button> <div className="modal-footer"> <button type="button" className="btn btn-primary" id="confirmSMSCode">Подтвердить</button> </div> </form> </div> </div> </div> </div> </> ) } export { ModalDialog } Картинка того, как выглядит сам таймер: https://javascript.ru/forum/attachme...d=166071402 3 И то, что показывается после истечения таймера: https://javascript.ru/forum/attachme...d=166071402 0 Как раз таки надпись "Отправить код повторно" должна ресетать таймер, показывать его и скрывать себя, но мне достаточно будет если выскажите как я могу вызвать функцию из дочернего компонента ) Спасибо. |
zorodivo, и родительского в дочерний можно передать пропс который и "скажет" нужно что-то запускать в дочернем или нет.
Но это неправильный подход. Логика должна быть построена таким образом, что всем "заправляет" именно родительский элемент. Дочерние лишь исполнители его указаний. |
Часовой пояс GMT +3, время: 21:07. |