ホームページ  >  記事  >  ウェブフロントエンド  >  反応中のクリック時にスタイルを変更する方法

反応中のクリック時にスタイルを変更する方法

藏色散人
藏色散人オリジナル
2022-12-28 11:15:292728ブラウズ

React は、クリック時にスタイルを変更するメソッドを実装します: 1. setState のコールバック関数を介して、クリックして状態を切り替えるときに実行される関数を実現します; 2. "

反応中のクリック時にスタイルを変更する方法

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

反応でクリック時にスタイルを変更するにはどうすればよいですか?

リアクションクリック/ホバーして CSS スタイルを変更します

(1) クリックしてスタイルを変更します

方法 1: (タイプスクリプトの書き込み) 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>
        );
    }
};

PS: ここをクリックして状態を切り替えるときに実行される関数は、setState のコールバック関数を通じて実装できます。

方法 2: (className を動的に追加)

上記のレンダリングは次のものに置き換えられます

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

対応する CSS ファイルが追加されます:

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

Recommend学習:《React ビデオ チュートリアル

以上が反応中のクリック時にスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。