0

Знаю что тут вместо componentDidMount/componentWillUnmount нужен useEffect hook приблизительно такой вот Useffect(()=>{},[]) didMount, Useffect(()=>()=>{},[]) willUnmount.
Еще нужен useState, завтра отпишусь что понял сам.
Скролл есть при закрытом popup(ескейп при открытом popup, закрытие окна popup и клик по пустому месте при открытом popup, отправка формы) и нет скролла при открытом popup.

class Popup extends PureComponent {
    constructor(props) {
        super(props);

        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleEscButtonClose = this.handleEscButtonClose.bind(this);
    }

    handleEscButtonClose(evt) {
        const { onActivePopupChange } = this.props;
        if (evt.keyCode === 27) {
            onActivePopupChange();
        }
    }

    handleSubmit(evt) {
        const {
            author,
            validAuthor,
            rating,
            comment,
            validComment,
            dignity,
            limitations,
            onSubmit,
            onActivePopupChange,
            onValidNameCheck,
            onValidCommentCheck,
        } = this.props;

        evt.preventDefault();

        if (!validAuthor || !author) {
            evt.preventDefault();
            onValidNameCheck(ValidStatus.INVALID);
            return;
        }

        if (!validComment || !comment) {
            evt.preventDefault();
            onValidCommentCheck(ValidStatus.INVALID);
            return;
        }

        onSubmit({
            id: randomNumber(),
            author,
            rating: Number(rating),
            comment,
            dignity,
            limitations,
            date: new Date().toUTCString(),
        });

        setItem(`author`, author);
        setItem(`rating`, Number(rating));
        setItem(`comment`, comment);
        setItem(`dignity`, dignity);
        setItem(`limitations`, limitations);
        setItem(`date`, new Date().toUTCString());

        onActivePopupChange();
    }

    componentDidMount() {
        disablePageScroll();
    }

    componentWillUnmount() {
        enablePageScroll();
    }

    render() {
        const {
            author,
            validAuthor,
            comment,
            validComment,
            onActivePopupChange,
            onRatingChange,
            onNameInput,
            onCommentInput,
            onDignityInput,
            onLimitationsInput,
        } = this.props;

        return <>
            <section className="popup" onKeyDown={this.handleEscButtonClose}>
                <h2 className="popup__title">Оставить отзыв</h2>
                <form action="#" className="popup-form review-form" onSubmit={this.handleSubmit}>
                    <div className="review-form__wrapper">
                        <div className="review-form__col">
                            <ul className="review-form__left-list">
                                <li className="review-form__left-item">
                                    {!validAuthor && <p className="review-form__text">Пожалуйста, заполните поле</p>}
                                    {!author && <label className="review-form__label" htmlFor="name">*</label>}
                                    <input className="review-form__input" id="name" type="text" name="name" placeholder="Имя" autoFocus
                                        onChange={(evt) => {
                                            onNameInput(evt);
                                        }}
                                    />
                                </li>
                                <li className="review-form__left-item">
                                    <input className="review-form__input" id="dignity" type="text" name="dignity" placeholder="Достоинства"
                                        onChange={(evt) => {
                                            onDignityInput(evt);
                                        }}
                                    />
                                </li>
                                <li className="review-form__left-item">
                                    <input className="review-form__input" id="limitations" type="text" name="limitations" placeholder="Недостатки"
                                        onChange={(evt) => {
                                            onLimitationsInput(evt);
                                        }}
                                    />
                                </li>
                            </ul>
                        </div>
                        <div className="review-form__col">
                            <div className="review-form__rating rating">
                                {stars.map((star,i) => {
                                    return <Fragment key={star+i}>
                                        <input className="rating__input" id={`star-${star}`} type="radio" name="rating" value={star}
                                            onChange={(evt) => {
                                                onRatingChange(evt);
                                            }}
                                        />
                                        <label className="rating__label" htmlFor={`star-${star}`}>Rating {star}</label>
                                    </Fragment>;
                                })}
                                <p className="rating__text">Оцените товар:</p>
                            </div>
                            <div className="review-form__comment">
                                {!validComment && <p className="review-form__text review-form__text--textarea">Пожалуйста, заполните поле</p>}
                                {!comment && <label className="review-form__label review-form__label--textarea" htmlFor="review-text">*</label>}
                                <textarea className="review-form__textarea" name="review-text" id="review-text" placeholder="Комментарий"
                                    onChange={(evt) => {
                                        onCommentInput(evt);
                                    }}
                                ></textarea>
                            </div>
                        </div>
                    </div>
                    <div className="review-form__submit">
                        <button className="review-form__button" type="submit">Оставить отзыв</button>
                    </div>
                    <div className="review-form__close">
                        <button className="review-form__button-close" type="button" onClick={(evt) => {
                            evt.preventDefault();
                            onActivePopupChange();
                        }}>
                            
                            <Cross className="review-form__close-icon" width="15" height="16" />

                        </button>
                    </div>
                </form>
            </section>
            <div className="popup__bg-layer" onClick={() => {
                onActivePopupChange();
            }}></div>
        </>;
    }
}

1 ответ 1

1

Основное отличие функционального компонента от классового заключается в том, что это обычная функция, и this внутри нее не играет такой роли, как внутри класса.

Поэтому первый шаг - удалить все this.

class Popup extends PureComponent {
    handleEscButtonClose(evt) {
        const { onActivePopupChange } = props;
        if (evt.keyCode === 27) {
            onActivePopupChange();
        }
    }

    handleSubmit(evt) {
        const {
            author,
            validAuthor,
            rating,
            comment,
            validComment,
            dignity,
            limitations,
            onSubmit,
            onActivePopupChange,
            onValidNameCheck,
            onValidCommentCheck,
        } = props;

        evt.preventDefault();

        if (!validAuthor || !author) {
            evt.preventDefault();
            onValidNameCheck(ValidStatus.INVALID);
            return;
        }

        if (!validComment || !comment) {
            evt.preventDefault();
            onValidCommentCheck(ValidStatus.INVALID);
            return;
        }

        onSubmit({
            id: randomNumber(),
            author,
            rating: Number(rating),
            comment,
            dignity,
            limitations,
            date: new Date().toUTCString(),
        });

        setItem(`author`, author);
        setItem(`rating`, Number(rating));
        setItem(`comment`, comment);
        setItem(`dignity`, dignity);
        setItem(`limitations`, limitations);
        setItem(`date`, new Date().toUTCString());

        onActivePopupChange();
    }

    componentDidMount() {
        disablePageScroll();
    }

    componentWillUnmount() {
        enablePageScroll();
    }

    render() {
        const {
            author,
            validAuthor,
            comment,
            validComment,
            onActivePopupChange,
            onRatingChange,
            onNameInput,
            onCommentInput,
            onDignityInput,
            onLimitationsInput,
        } = props;

        return <>
            <section className="popup" onKeyDown={handleEscButtonClose}>
                <h2 className="popup__title">Оставить отзыв</h2>
                <form action="#" className="popup-form review-form" onSubmit={handleSubmit}>
                    <div className="review-form__wrapper">
                        <div className="review-form__col">
                            <ul className="review-form__left-list">
                                <li className="review-form__left-item">
                                    {!validAuthor && <p className="review-form__text">Пожалуйста, заполните поле</p>}
                                    {!author && <label className="review-form__label" htmlFor="name">*</label>}
                                    <input className="review-form__input" id="name" type="text" name="name" placeholder="Имя" autoFocus
                                        onChange={(evt) => {
                                            onNameInput(evt);
                                        }}
                                    />
                                </li>
                                <li className="review-form__left-item">
                                    <input className="review-form__input" id="dignity" type="text" name="dignity" placeholder="Достоинства"
                                        onChange={(evt) => {
                                            onDignityInput(evt);
                                        }}
                                    />
                                </li>
                                <li className="review-form__left-item">
                                    <input className="review-form__input" id="limitations" type="text" name="limitations" placeholder="Недостатки"
                                        onChange={(evt) => {
                                            onLimitationsInput(evt);
                                        }}
                                    />
                                </li>
                            </ul>
                        </div>
                        <div className="review-form__col">
                            <div className="review-form__rating rating">
                                {stars.map((star,i) => {
                                    return <Fragment key={star+i}>
                                        <input className="rating__input" id={`star-${star}`} type="radio" name="rating" value={star}
                                            onChange={(evt) => {
                                                onRatingChange(evt);
                                            }}
                                        />
                                        <label className="rating__label" htmlFor={`star-${star}`}>Rating {star}</label>
                                    </Fragment>;
                                })}
                                <p className="rating__text">Оцените товар:</p>
                            </div>
                            <div className="review-form__comment">
                                {!validComment && <p className="review-form__text review-form__text--textarea">Пожалуйста, заполните поле</p>}
                                {!comment && <label className="review-form__label review-form__label--textarea" htmlFor="review-text">*</label>}
                                <textarea className="review-form__textarea" name="review-text" id="review-text" placeholder="Комментарий"
                                    onChange={(evt) => {
                                        onCommentInput(evt);
                                    }}
                                ></textarea>
                            </div>
                        </div>
                    </div>
                    <div className="review-form__submit">
                        <button className="review-form__button" type="submit">Оставить отзыв</button>
                    </div>
                    <div className="review-form__close">
                        <button className="review-form__button-close" type="button" onClick={(evt) => {
                            evt.preventDefault();
                            onActivePopupChange();
                        }}>
                            
                            <Cross className="review-form__close-icon" width="15" height="16" />

                        </button>
                    </div>
                </form>
            </section>
            <div className="popup__bg-layer" onClick={() => {
                onActivePopupChange();
            }}></div>
        </>;
    }
}

Функциональный компонент - это функция render.

render() {
    const {
        author,
        validAuthor,
        comment,
        validComment,
        onActivePopupChange,
        onRatingChange,
        onNameInput,
        onCommentInput,
        onDignityInput,
        onLimitationsInput,
    } = props;

    return <> ... </>;
}

Данная функция принимает передаваемые свойства

render(props) {

Теперь достаточно добавить имя

function Popup(props){
    const {
        author,
        validAuthor,
        comment,
        validComment,
        onActivePopupChange,
        onRatingChange,
        onNameInput,
        onCommentInput,
        onDignityInput,
        onLimitationsInput,
    } = props;

    return <> ... </>;
}

Осталось перенести обработчики внутрь функции:

function Popup(props){
    const { ... } = props;

    function handleEscButtonClose(evt) {
        const { onActivePopupChange } = props;
        if (evt.keyCode === 27) {
            onActivePopupChange();
        }
    }

    function handleSubmit(evt) {
        const { ... } = props;

        evt.preventDefault();

        ...

        setItem(`author`, author);
        setItem(`rating`, Number(rating));
        setItem(`comment`, comment);
        setItem(`dignity`, dignity);
        setItem(`limitations`, limitations);
        setItem(`date`, new Date().toUTCString());

        onActivePopupChange();
    }

    return <> ... </>;
}

А так же применить useEffect как аналог пары componentDidMount/componentWillUnmount

function Popup(props){
    const { ... } = props;

    useEffect(()=>{
        disablePageScroll();

        return enablePageScroll;
    },[])

    function handleEscButtonClose(evt) { ... }

    function handleSubmit(evt) { ... }

    return <> ... </>;
}
2
  • Благодарю вас. Проблема есть в небольшом понимании самого useEffect, знаю что он срабатывает после монтирования компонента и реагирует на изменения в нем(пропсы там и т.д.), но если честно, именно ваша запись useEffect(()=>{ disablePageScroll(); return enablePageScroll; },[]) немного привела в замешательство, пока не осилил как именно это работает :) 6 окт 2021 в 18:43
  • 1
    @EvgeniyReva, useEffect может возвращать функцию, которая вызовется перед следующим вызовом обработчика: Effects with Cleanup
    – Grundy
    6 окт 2021 в 18:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.