How to change the style on click in react-Front-end Q&A-php.cn

How to change the style on click in react

藏色散人

Release： 2022-12-28 11:15:29

Original

2737 people have browsed it

React implements the method of changing the style when clicking: 1. Through the callback function in setState to realize the function performed when clicking to switch the state; 2. Through "

How to change the style on click in react

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to change the style on click in react?

React click/hover to modify the CSS style

(1) Click to modify the style

Method 1: (typescript writing method)

type state = {
    selected: boolean;
};
 
class Measurement extends Component<{}, state> {
    constructor(props:any) {
        super(props);
        this.state = { selected: false };
    }
 
    handleClick = (e:any) => {
        this.setState({ selected: !this.state.selected }, () => {
            if(!this.state.selected){
                this.clearAll();
            }
        });
 
    }
    private rightBtnStyle: CSSProperties = {
        background:"url(/assets/images/3.png) no-repeat center",
        border: "none",
        color: "white"
    };
    private rightBtnStyle2: CSSProperties = {
        background:"url(/assets/images/1.png) no-repeat center",
        border: "none",
        color: "white"
    };
 
//省略具体功能
 
    render() {
        var currentstyle;
        if(this.state.selected){
            currentstyle=this.rightBtnStyle2;
        }
        else{
            currentstyle=this.rightBtnStyle;
            
        }
        return(
            <div className="tool-widget">
                <Popover placement="left" content={this.content} trigger="click">
                    <Button className="right-btn" style={currentstyle} onClick={this.handleClick.bind(this)}></Button>
                </Popover>
            </div>
        );
    }
};

Copy after login

PS: The function performed when clicking here to switch states can be implemented through the callback function in setState.

Method 2: (Dynamicly add className)

The above render is replaced with the following

render() {
        return (
            <div className="tool-widget" id="Measurement">
                <Popover placement="left" content={this.content} trigger="click">
                    <Button className={["right-btn", this.state.selected ? "active":null].join(&#39; &#39;)} onClick={this.handleClick.bind(this)}></Button>
                </Popover>
            </div>
        );
    }

Copy after login

The corresponding css file is added:

#Measurement {
    .right-btn{
        background:url(./images/3.png) no-repeat center;
        border:none;
        color: white;
        width:100%;
        height: 100%
    }
    .right-btn.active{
        background:url(./images/1.png) no-repeat center;
    }
}

Copy after login

Recommended learning:《react video tutorial》

The above is the detailed content of How to change the style on click in react. For more information, please follow other related articles on the PHP Chinese website!