Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk menukar gaya pada klik dalam bertindak balas

Bagaimana untuk menukar gaya pada klik dalam bertindak balas

藏色散人
Lepaskan: 2022-12-28 11:15:29
asal
2764 orang telah melayarinya

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>
        );
    }
};
Salin selepas log masuk

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>
        );
    }
Salin selepas log masuk

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;
    }
}
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan