Question

在组件AddWordPartButton的类中，我将状态isHovered初始化为false，并使用onMouseEnter和onMouseLeave来更改其值。

这是我想要的映射（在我看来，我已经在代码中定义了）：

onMouseEnter⇒isHovered = true
onMouseLeave⇒isHovered = false

发生的事情与我期望发生的事情相反，并且我看不到这种现象的任何原因。这是似乎发生的映射：

onMouseEnter⇒isHovered = false
onMouseLeave⇒isHovered = true

我在另一个组件中使用AddWordPartButton，而不会影响其行为，请在另一个组件的<AddWordPartButton />函数内部使用此render进行调用-除此之外，它工作得很好

这是代码：

import React from 'react;

class AddWordPartButton extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isHovered: false,
        };
        this.onMouseEnterHandler = this.onMouseEnterHandler.bind(this);
        this.onMouseLeaveHandler = this.onMouseLeaveHandler.bind(this);
    } 

    onMouseEnterHandler() {
        this.setState({isHovered: true});
        console.log(this.state); //logs false
    }

    onMouseLeaveHandler() {
        this.setState({isHovered: false});
        console.log(this.state); //logs true
    }

    render() {
        <div className={classes.addWordPartButton__Container} 
            onMouseEnter={this.onMouseEnterHandler}
            onMouseLeave={this.onMouseLeaveHandler}
        >
        </div>


    }

}

为什么会这样，我该如何解决？

Answer 1

set状态是异步的，请改用它，setState函数的回调参数将在设置状态后触发。与公元前相反，您总是在新状态更新后记录一个步骤。

onMouseEnterHandler() {
    this.setState(() => ({isHovered: true}), () => console.log(this.state));
}

onMouseLeaveHandler() {
    this.setState(() => ({isHovered: false}), () => console.log(this.state));
}

我的代码中的onMouseEnter和onMouseLeave行为与预期相反-为什么？

1 个答案: