Question

我尝试在点击事件发生时显示背景颜色并且在1或2秒后没有进一步交互淡出背景颜色。

基本上我想做active属性在css中做的事情，但对于点击事件。

我当前的方法需要第二次触发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>

我的CSS

.txt_vote_bar_div {
    width: 100%;
    height: 50px;
    min-height: 50px;
    position: relative;
    border: 1px solid #C6C6C6;
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
}

.txt_vote_bar_div_active {
    background-color: #001f3f;
    transition: 1s ease-in-out;
}

.txt_vote_bar_div_notactive {
    background-color: #FFFFFF;
    transition: 1s ease-in-out;
}

Answer 1

您可以通过设置超时来更改它。

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);
}

如果您不能使用胖箭头功能，您可以将this分配给self之类的变量，并在超时处理程序中调用self.setState。

Answer 2

Please find running example

在您的代码中出现了一个错误，即 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')
);

使用onClick淡入并淡出过渡

2 个答案: