主页 / 问题 / 1335365
Accepted
Evgeniy Reva
Asked:2022-10-06 02:36:40 +0000 UTC2022-10-06 02:36:40 +0000 UTC

将一个类组件变成一个功能性的 one - hooks, React

  • 772

我知道你需要 useEffect 钩子而不是 componentDidMount/componentWillUnmount，比如 Useffect(()=>{},[]) didMount, Useffect(()=>()=>{},[]) willUnmount。
我也需要useState，明天我会退订我自己理解的。
弹窗关闭时有滚动（弹窗打开时转义，弹窗打开时关闭弹窗点击空白处，提交表单），弹窗打开时没有滚动。

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>
        </>;
    }
}
javascript

1 个回答

  1. Best Answer

    函数式组件和类组件的主要区别在于，它是一个普通的函数，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 <> ... </>;
}
    • 1

相关问题