REACT - o'tish sinfi onclick

CSS xususiyatlarini o'zgartirish uchun faol kodli onClick ni qanday qilib almashtirishni tushuntirmoqchiman.

Ko'plab yondashuvlarni ko'rib chiqdim va ko'plab SO javoblarini o'qidim. Jquery-dan foydalanib, bu juda sodda bo'lar edi, ammo buni reaktsiya bilan amalga oshirishni tushunolmayman. Mening kodim quyida. Buni men qanday qilishim kerakligini maslahat bera olasizmi?

Har bir element uchun yangi komponent yaratmasdan buni qilish mumkinmi?

class Test extends Component(){

    constructor(props) {

    super(props);
    this.addActiveClass= this.addActiveClass.bind(this);

  }

  addActiveClass() {

    //not sure what to do here

  }

    render() {
    <div>
      <div onClick={this.addActiveClass}>
        
1

</div> <div onClick={this.addActiveClass}>
2

</div> <div onClick={this.addActiveClass}>
3

</div> </div> } }
20

6 javoblar

Use state. Reacts docs are here.

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.addActiveClass= this.addActiveClass.bind(this);
        this.state = {
            active: false,
        };
    }
    toggleClass() {
        const currentState = this.state.active;
        this.setState({ active: !currentState });
    };

    render() {
        return (
            <div 
                className={this.state.active ? 'your_className': null} 
                onClick={this.toggleClass} 
            >
                
{this.props.text}

</div> ) } } class Test extends Component { render() { return ( <div> </div> ); } }
29
qo'shib qo'ydi
qo'shimcha komponent yaratmasdan buni qilishning bir yo'li bormi?
qo'shib qo'ydi muallif peter flanagan, manba
Men komponentni sindirdim, lekin bu holat har bir elementga faol qo'shadi. Men faqat bitta elementning faol sinfga ega bo'lishini xohlayman
qo'shib qo'ydi muallif peter flanagan, manba
Bu boshqa elementlarning faol sinflari hali ham mavjudligidan, bu o'zgaruvchan "faol" sinf deb atalmaydi.
qo'shib qo'ydi muallif Dat TT, manba
Siz murakkab tarkibiy qismlarni kichik tarkibiy qismlarga ajratishni xohlaysizmi? facebook .github.io/reaksiya/docs/"hellip;
qo'shib qo'ydi muallif cssko, manba

Reakt tarkibiy qismlari davlat tushunchasiga ega, shuning uchun siz uni o'zgartirmoqchi bo'lsangiz, setState ni tanlang:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

constructor(props) {
  super(props);

  this.addActiveClass= this.addActiveClass.bind(this);
  this.state = {
    isActive: false
  }
}

addActiveClass() {
  this.setState({
    isActive: true
  })
}
</div> </div>

Sizning komponentingizda kerakli narsani ko'rsatish uchun this.state.isActive dan foydalaning.

Ushbu holatni 1-komponentda o'rnatish va 2-komponentda ishlatmoqchi bo'lsangiz, bu yanada murakkablashadi. Faqat bitta yo'nalishda ma'lumotlar oqimi va uni boshqarishda sizga yordam beradigan ehtimol, reduksga ko'proq e'tibor bering.

4
qo'shib qo'ydi
state ni tushunaman, ammo bu hali elementni bosganda sinf nomini qanday yangilashni tushuntirmaydi?
qo'shib qo'ydi muallif peter flanagan, manba
lekin faol elementni har bir elementga chertib qo'yadi. Men faqat elementni active sinf nomiga ega bo'lish uchun bosing
qo'shib qo'ydi muallif peter flanagan, manba
buni element komponentiga ajratmasdan buni qilishning usullari bormi?
qo'shib qo'ydi muallif peter flanagan, manba
OK, ikkalasiga ham rahmat! @dhorelik va cssko
qo'shib qo'ydi muallif peter flanagan, manba
@dhorelik sizni e.target.className dan foydalanishingiz mumkinligini ko'rganmisiz - bu menga ba'zi bir yo'lni oladi, lekin uning o'rnatilgan eskilarini olib tashlash mumkin emas
qo'shib qo'ydi muallif peter flanagan, manba
Sizning jsx belgilaringizda - <div className = {this.state.isActive? 'faol': ''}> . Shartli ko'rsatish haqida, ammo u hali davlatga tayanadi.
qo'shib qo'ydi muallif dhorelik, manba
Nima uchun har bir element? Siz shartni qo'shgan narsaga sinf qo'shasiz. Ideal sifatida sizning ma'lumotlaringiz elementi komponentiga ko'chirilishi kerak. Keyin uni 3 marta kiritasiz va asosan o'zingizning isActive holatiga ega bo'lgan 3 ta elementga ega bo'lasiz. Siz nimani nazarda tutyapsiz?
qo'shib qo'ydi muallif dhorelik, manba
yaxshi holatda, faqat isActive holatida emas, balki element nomini (1, 2, 3) saqlay olasiz. Sizning ma'lumotlaringizdan shunday tarzda shartni quyidagi shartlarga asoslashingiz mumkin: <div className = {this.state.currentItem === 1? 'faol': ''}> . Va 2 va 3 uchun xuddi shunday qiling
qo'shib qo'ydi muallif dhorelik, manba
lekin ha, eng toza yondashuv emas.
qo'shib qo'ydi muallif dhorelik, manba
Biror narsa tarkibiy qismiga ega bo'lmasdan buni qilishning yaxshi usuli yo'q, shuning uchun mening javobim va @dhorelik nima demoqdasiz. Bu, albatta, eng yaxshi usul.
qo'shib qo'ydi muallif cssko, manba

Xo'sh, addActiveClass nimani bosganligini bilishi kerak. Shu kabi bir narsa bo'lishi mumkin (divs davlat majmuasi sifatida faol bo'lgan ma'lumotni qo'shib qo'yganligimga e'tibor bering va onClick endi qanday ma'lumotlarni paramater sifatida bosganidan keyin o'tib ketadi, shundan keyin davlat yangilangan bo'ladi - buni bajaring, lekin siz fikrni qabul qilasiz).

class Test extends Component(){

    constructor(props) {

        super(props);
        this.state = {activeClasses: [false, false, false]};
        this.addActiveClass= this.addActiveClass.bind(this);

      }

  addActiveClass(index) {
      const activeClasses = [...this.state.activeClasses.slice(0, index), !this.state.activeClasses[index], this.state.activeClasses.slice(index + 1)];
      this.setState({activeClasses});
  }

render() {
        const activeClasses = this.activeClasses.slice();
        return (
                <div>
                  <div className={activeClasses[0]? "active" : "inactive"} onClick={() => this.addActiveClass(0)}>
                    
0

</div> <div className={activeClasses[1]? "active" : "inactive"} onClick={() => this.addActiveClass(1)}>
1

</div> <div onClick={() => this.addActiveClass(2)}>
2

</div> </div>); } }
2
qo'shib qo'ydi

The above answers will work, but just in case you want a different approach, try classname: https://github.com/JedWatson/classnames

2
qo'shib qo'ydi

A good sample would help to understand things better:

HTML

<div id="root">
</div>

CSS

.box {
  display: block;
  width: 200px;
  height: 200px;
  background-color: gray;
  color: white;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.box.green {
  background-color: green; 
}

React kodi

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {addClass: false}
  }
  toggle() {
    this.setState({addClass: !this.state.addClass});
  }
  render() {
    let boxClass = ["box"];
    if(this.state.addClass) {
      boxClass.push('green');
    }
    return(
        <div className={boxClass.join(' ')} onClick={this.toggle.bind(this)}>{this.state.addClass ? "Remove a class" : "Add a class (click the box)"}
Read the tutorial here.</div> ); } } ReactDOM.render(, document.getElementById("root"));
1
qo'shib qo'ydi

I would prefer using "&&" -operator on inline if-statement. In my opinnion it gives cleaner codebase this way.

Umuman olganda, siz bunday narsalarni qilishingiz mumkin

render(){
return(
  <div>
    <button className={this.state.active && 'active'}
      onClick={() => this.setState({active: !this.state.active}) }>Click me</button>
  </div>
)
}

Faqat o'q funksiyasi ES6 xususiyatini yodda tuting va class constructor() {} da "this.state.active" qiymatini belgilashni unutmang

this.state = { active: false }

yoki siz JSX-dagi CSS-ni AOK qilishni istasangiz, buni shunday qilishingiz mumkin

<button style={this.state.active && style.button} >button</button>

va siz uslubi json o'zgaruvchilarini e'lon qilishingiz mumkin

const style = { button: { background:'red' } }

JSX uslub sahifalarida tuya kostryulkalaridan foydalaning.

1
qo'shib qo'ydi
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