我正在React中使用MouseEvent<HTMLElement>
转换按钮组件以使用Hooks。但是,每个鼠标事件现在都出现RangeError: Maximum call stack size exceeded
错误。
新代码是
const [isActive, setIsActive] = useState(false);
const [isFocus, setIsFocus] = useState(false);
const [isHover, setIsHover] = useState(false);
useEffect(() => {
if (autoFocus && button instanceof HTMLButtonElement) {
button.focus();
}
}, [autoFocus, button]);
const isInteractive = () => !isDisabled && !isLoading;
const onMouseEnter = (e: MouseEvent<HTMLElement>) => {
setIsHover(true);
if (onMouseEnter && !isHover) {
onMouseEnter(e);
}
};
const onMouseLeave = (e: MouseEvent<HTMLElement>) => {
setIsActive(false);
setIsHover(false);
if (onMouseLeave && isHover) {
onMouseLeave(e);
}
};
const onMouseDown = (e: MouseEvent<HTMLElement>) => {
e.preventDefault();
setIsActive(true);
if (onMouseDown && !isActive) {
onMouseDown(e);
}
};
const onMouseUp = (e: MouseEvent<HTMLElement>) => {
setIsActive(true);
if (onMouseUp && !isActive) {
onMouseUp(e);
}
};
const onFocus: FocusEventHandler<HTMLButtonElement> = event => {
setIsFocus(true);
if (onFocus) {
onFocus(event);
}
};
const onBlur: FocusEventHandler<HTMLButtonElement> = event => {
setIsFocus(false);
if (onBlur) {
onBlur(event);
}
};
const onInnerClick: MouseEventHandler<HTMLElement> = e => {
if (!isInteractive()) {
e.stopPropagation();
}
return true;
};
const StyledButton: ReactType = CustomComponent || getElement();
render() {
return (
<StyledButton
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
onFocus={onFocus}
onBlur={onBlur}
>
{children}
</StyledButton>
);
};
原始代码是(有效的)
state = {
isActive: false,
isFocus: false,
isHover: false,
};
componentDidMount() {
if (this.props.autoFocus && this.button instanceof HTMLButtonElement) {
this.button.focus();
}
}
isInteractive = () => !this.props.isDisabled && !this.props.isLoading;
onMouseEnter = (e: React.MouseEvent<HTMLElement>) => {
this.setState({ isHover: true });
if (this.props.onMouseEnter) {
this.props.onMouseEnter(e);
}
};
onMouseLeave = (e: React.MouseEvent<HTMLElement>) => {
this.setState({ isHover: false, isActive: false });
if (this.props.onMouseLeave) {
this.props.onMouseLeave(e);
}
};
onMouseDown = (e: React.MouseEvent<HTMLElement>) => {
e.preventDefault();
this.setState({ isActive: true });
if (this.props.onMouseDown) {
this.props.onMouseDown(e);
}
};
onMouseUp = (e: React.MouseEvent<HTMLElement>) => {
this.setState({ isActive: false });
if (this.props.onMouseUp) {
this.props.onMouseUp(e);
}
};
onFocus: React.FocusEventHandler<HTMLButtonElement> = event => {
this.setState({ isFocus: true });
if (this.props.onFocus) {
this.props.onFocus(event);
}
};
onBlur: React.FocusEventHandler<HTMLButtonElement> = event => {
this.setState({ isFocus: false });
if (this.props.onBlur) {
this.props.onBlur(event);
}
};
onInnerClick: React.MouseEventHandler<HTMLElement> = e => {
if (!this.isInteractive()) {
e.stopPropagation();
}
return true;
};
const StyledButton: React.ReactType = CustomComponent || this.getElement();
render() {
return (
<StyledButton
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
onFocus={onFocus}
onBlur={onBlur}
>
{children}
</StyledButton>
);
};
我在带有钩子的新代码中错过了哪些导致event
重复的内容?
我认为问题在于您对useEffect的使用。我认为在useEffect中为deps Array提供的两个值是导致此问题的原因。等效于componentDidMount,它将被调用一次,即具有一个空数组或根本没有数组。