Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menukar gaya pada klik dalam bertindak balas

Bagaimana untuk menukar gaya pada klik dalam bertindak balas

藏色散人
藏色散人asal
2022-12-28 11:15:292731semak imbas

React melaksanakan kaedah menukar gaya apabila mengklik: 1. Melalui fungsi panggil balik dalam setState untuk merealisasikan fungsi yang dilakukan apabila mengklik untuk menukar keadaan 2. Melalui "

Bagaimana untuk menukar gaya pada klik dalam bertindak balas

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk menukar gaya pada klik dalam bertindak balas?

Tindak balas klik/tuding untuk mengubah suai gaya CSS

(1) Klik untuk mengubah suai gaya

Kaedah 1: (tulisan skrip taip kaedah)

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

PS: Fungsi yang dilakukan apabila mengklik di sini untuk menukar keadaan boleh dilaksanakan melalui fungsi panggil balik dalam setState.

Kaedah 2: (Tambah className secara dinamik)

Render di atas digantikan dengan yang berikut

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

dan fail css yang sepadan ditambah:

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

Kajian Disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Bagaimana untuk menukar gaya pada klik dalam bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn