ReactJS

Question

'daki olayda bir className ekleme veya kaldırma Rehberinde oldukça yeniyim ve düşüncemi standart js'den dönüştürerek biraz uğraşıyorum. Benim içinde

bileşeni tepki Aşağıdaki elemanı vardır:

<div className='base-state' onClick={this.handleClick}>click here</div> 

aradığım davranış tıklamasında ekstra sınıf eklemektir. İlk fikrim, sınıfı tıklama işleyici işlevine eklemeye çalışmaktı.

olsa benzer bir şey yapmak herhangi örneklerini bulmak mümkün olmamıştır, bu yüzden ben doğru bir şekilde bu konuda düşünmüyorum oldukça eminim.

Beni doğru yöne yönlendiren var mı?

Answer 1

Sınıfların listesi, bileşenin durumundan türetilebilir. Örneğin:

var Component = React.createClass({ 
    getInitialState: function() { 
    return { 
     clicked: false 
    }; 
    }, 

    handleClick: function() { 
    this.setState({clicked: true}); 
    }, 

    render: function() { 
    var className = this.state.clicked ? 'click-state' : 'base-state'; 
    return <div className={className} onClick={this.handleClick}>click here</div>; 
    } 
}); 

this.setState çağrılması bileşenin bir rerender tetikleyecektir. JavaScript classlist özelliği ref eleman almak Sonra handleClick yönteminde

<div ref="element" className="base-state" onClick={this.handleClick}>click here</div> 

ve kullanımı:

Answer 2

div'e ref özellik ekle

handleClick =() => { 
    const element = this.refs.element; 
    element.classList.add('click-state'); 
} 

https://reactjs.org/docs/refs-and-the-dom.html

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList