我知道你需要 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>
</>;
}
}
