Javascript 使用onClick进行淡入淡出转换

当点击事件发生时，我试图显示一个带有过渡的背景色，在没有进一步交互的情况下，背景色会在1或2秒后淡出

基本上，我想做css中

active

属性所做的事情，但不想做点击事件

我当前的方法需要第二次触发click事件以淡出背景色。如何在一次单击中完成此操作

我的方法

    handleClick(id) {
        this.setState({
            active: !this.state.active
        })
    }

    <div className={this.state.active ? "txt_vote_bar_div txt_vote_bar_div_active" : "txt_vote_bar_div txt_vote_bar_div_notactive"} 
        onClick={this.handleClick()}>
    </div>

---

您可以通过设置一个超时将其更改回

handleClick(id) {

        this.setState({
            active: !this.state.active
        });

        // The timeout will trigger after 1000ms. Use a fat arrow function
        // to keep the same reference to this.
        setTimeout(() => {
            this.setState({
                 active: false
            });
        }, 1000);
}

---

如果不能使用fat arrow函数，可以将

此

分配给变量，如

self

，并从超时处理程序中调用

self.setState

。

可以通过设置超时将其更改回来

handleClick(id) {

        this.setState({
            active: !this.state.active
        });

        // The timeout will trigger after 1000ms. Use a fat arrow function
        // to keep the same reference to this.
        setTimeout(() => {
            this.setState({
                 active: false
            });
        }, 1000);
}

如果不能使用fat arrow函数，可以将

此

分配给变量，如

self

，并从超时处理程序中调用

self.setState

。

在代码中，您犯了一个错误，即onClick={this.handleClick（）} 因此，每次渲染后都会触发单击事件

这就是我所做的

class Hello extends React.Component {
    state = {
        active: false
    }
    handleClick(e) {
        this.setState({
            active: !this.state.active
        });
        setTimeout(() => {
            this.setState({
                active: !this.state.active
            });
        }, 1000);
    }
    render() {
        return ( 
          <div className = { this.state.active ? "txt_vote_bar_div txt_vote_bar_div_active" : "txt_vote_bar_div txt_vote_bar_div_notactive" } onClick = { this.handleClick.bind(this) }></div>
        );
    }
}

ReactDOM.render( <
    Hello initialName = "World" / > ,
    document.getElementById('container')
);

类Hello扩展了React.Component{
状态={
活动：错误
}
handleClick（e）{
这是我的国家({
活动：！this.state.active
});
设置超时（（）=>{
这是我的国家({
活动：！this.state.active
});
}, 1000);
}
render（）{
报税表（
);
}
}
ReactDOM.render（<
您好initialName=“世界”/>，
document.getElementById（'容器'）
);

在代码中，您犯了一个错误，即onClick={this.handleClick（）} 因此，每次渲染后都会触发单击事件

这就是我所做的

class Hello extends React.Component {
    state = {
        active: false
    }
    handleClick(e) {
        this.setState({
            active: !this.state.active
        });
        setTimeout(() => {
            this.setState({
                active: !this.state.active
            });
        }, 1000);
    }
    render() {
        return ( 
          <div className = { this.state.active ? "txt_vote_bar_div txt_vote_bar_div_active" : "txt_vote_bar_div txt_vote_bar_div_notactive" } onClick = { this.handleClick.bind(this) }></div>
        );
    }
}

ReactDOM.render( <
    Hello initialName = "World" / > ,
    document.getElementById('container')
);

类Hello扩展了React.Component{
状态={
活动：错误
}
handleClick（e）{
这是我的国家({
活动：！this.state.active
});
设置超时（（）=>{
这是我的国家({
活动：！this.state.active
});
}, 1000);
}
render（）{
报税表（
);
}
}
ReactDOM.render（<
您好initialName=“世界”/>，
document.getElementById（'容器'）
);

您正在调用处理程序，而不是传递引用。this

onClick={this.handleClick（）}

应更改为this

onClick={this.handleClick}

@CrazHydroid请找到我的答案，如果您有任何问题，请告诉我。您正在调用处理程序而不是传递引用。this

onClick={this.handleClick（）}

应更改为this

onClick={this.handleClick}

@CraZyDroiD请找到我的答案，如果您有任何问题，请告诉我。