tugmachasini bosish orqali CSS classini yangilang - Reactjs

Foydalanuvchi ma'lum bir tugmani bosganida fonimga ta'sir qilishni xohlayman. Agar foydalanuvchi tugmani bosganida men CSS classni qanday yangilashim mumkin.

Bu men mavjud CSS class

.post_options {
    width: 100%;
    height: 100%;
    float: left;
    background-color: #eceff1;
    position: fixed;
}

Men shuni qilmoqchimanki, foydalanuvchi tugmachani bosadi

.post_options {
    width: 100%;
    height: 100%;
    float: left;
    background-color: #eceff1;
    position: fixed;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

Bu fonimni loyqalab qilishim kerak bo'lgan tugma

 <button className="preview_btn" href="#postpreview" onClick={this.preview}>Preview</button>

Eslatma : Buni reaksiyada qilaman.

Men fon-effektlar bilan alohida div berishga harakat qildim, lekin u nima qilsa, uning mazmunini bulg'ovchi.

0

6 javoblar

Sizning sinfingizdagi holatni belgilang:

 this.state = {
    blur: false; 
  }

Tugmani bosish bilan chaqiriladigan funksiyani yaratish. Bu funktsiya holatni o'zgartiradi va qayta ishlashni ishga tushiradi

 preview() {
    this.setState = {
      blur:true;
    }
}

Tugma qismidagi 'blur' holatini tekshiring va shunga muvofiq sinflarni qo'shing

//Below code adds 'blur' class if the button is clicked
<button className={this.state.blur?'blur':''} onClick={this.preview}>Preview</button>  

Codepen

3
qo'shib qo'ydi
Javobimdagi kodepenani tekshiring
qo'shib qo'ydi muallif sanket, manba

It is possible to change CSS rules from javascript, but I guarantee this is not the route you would like to take. See Changing a CSS rule-set from Javascript

Aksincha, men quyidagi ikkita CSS sinfidan foydalanishni istayman:

.post_options {
    width: 100%;
    height: 100%;
    float: left;
    background-color: #eceff1;
    position: fixed;
}

.filter_blur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

Keyin filter_blur filter_blur kodi bilan ishlashi kerakligini ko'rsatish uchun sizning tugmani bosishingiz kerak. Bu qanday amalga oshiriladi, sizning ilovangiz qanday tuzilganiga bog'liq bo'ladi. Misol uchun, oddiy hayot tsiklining tarkibiy qismlaridan yaratilgan dasturga o'xshash biror oqim yoki redux ilovasini yaratayotgan bo'lsangiz, bu ehtimol ancha farqlanadi.

0
qo'shib qo'ydi

Keling, bu qisqa va shirin turing. JSX va shunga qarab Babeldan foydalansangiz ES6 o'qi funktsiyalaridan foydalanishingiz mumkin. Jonli codepen misolini bu yerda topishingiz mumkin.

CSS

.blur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

JavaScript

class Section extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
       blur: false
    };
  };

  render() {
    return (
       
    0
    qo'shib qo'ydi

    Men Tomas aytganidek, yoki bu funktsiya onclick ()

    function post_options_click(){
     var x = document.getElementsByClassName("post-options");
     x[0].style.filter= "blur(5px)";
     x[0].style.-webkit-filter= "blur(5px)";
     x[0].style.-moz-filter= "blur(5px)";
     x[0].style.-o-filter= "blur(5px)";
     x[0].style.-ms-filter= "blur(5px)";
    }
    
    0
    qo'shib qo'ydi

    style

    Uslublar xususiyati CSS jildiga emas, balki tuya-jildli xususiyatlarga ega bo'lgan JavaScript obyektini qabul qiladi. Bu DOM uslubi JavaScript xususiyatiga mos keladi, yanada samaralidir va XSS xavfsizligi teshiklarining oldini oladi. Misol uchun:

    const divStyle = {
      color: 'blue',
      backgroundImage: 'url(' + imgUrl + ')',
    };
    
    
    function HelloWorldComponent() {
      return <div style={divStyle}>Hello World!</div>;
    }
    

    See more at DOM Elements - React

    0
    qo'shib qo'ydi

    Nima uchun faqat boshqa sinfni yaratmaysiz va sinflar o'rtasida almashasiz?

    Siz qilishingiz kerak bo'lgan yagona narsa - o'zgartirilgan effektlarni boshqa sinfga ko'chirish, kodni post_options_clicked deb belgilang va ushbu usulda tugma bosilganda komponent holatini o'zgartiradi.

    Bunga o'xshash oddiy tarkibiy qismga ega ekanligingizni bildiring

    const ExampleComponent = React.createClass({
        getInitialState() {
            return({
                toggled: false
            });
        },
    
        toggleState() {
            if(this.state.toggled){
                this.setState({ toggled:false });
            }else{
                this.setState({ toggled:true });
            }
        },
    
        render() {
            return(
                <div>
                   {
                    this.state.toggled
                    ?
                    <div className="post-options-clicked">
                      //Your Code goes here
                    </div>
                    :
                    <div className="post-options">
                      //Your Code goes here
                    </div>
                   }
                   <button 
                     className="preview_btn" 
                     href="#postpreview" 
                     onClick={this.toggleState}
                   >
                   Preview
                   </button>
                </div>
            )
        },
    )}
    
    0
    qo'shib qo'ydi
    Menga namuna ko'rsatasizmi?
    qo'shib qo'ydi muallif CraZyDroiD, manba
    @CraZyDroiD O'zgartirishni ko'ring
    qo'shib qo'ydi muallif Thomas Freeborough, manba
    Javascript UZB
    Javascript UZB
    99 ishtirokchilar

    @js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb

    ReactJS & ReactNative Uzbekistan
    ReactJS & ReactNative Uzbekistan
    81 ishtirokchilar

    Guruh ReactJS va ReactNative bo'yicha muloqot qilish uchun ochilgan. Sizni qiziqtirsa: @nodejs_uz @react_uz @angular_uz @ngTashkent @yiiframework_uz @js_uzb @typescript_uzb @vuejs_uz @ngTashkent @laravel_uz @uzdevgroup Ish o'rinlari @UzDev_jobs