ReactJS

Question

में ईवेंट पर क्लासनाम को जोड़ने या निकालने के लिए मैं वास्तव में प्रतिक्रिया करने के लिए काफी नया हूं और मैं मानक जेएस से अपनी सोच को बदलने के साथ थोड़ा संघर्ष कर रहा हूं।

मेरे में घटक प्रतिक्रिया मैं निम्नलिखित तत्व होते हैं:

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

व्यवहार मैं देख रहा हूँ क्लिक पर एक अतिरिक्त वर्ग को जोड़ने के लिए है। मेरा पहला विचार क्लिक हैंडलर फ़ंक्शन में कक्षा को आजमाने और जोड़ने का था।

मैं किसी भी उदाहरण है कि इसी तरह कुछ भी हालांकि ढूँढने में सक्षम नहीं किया गया है, तो मैं काफी यकीन है कि मैं सही तरीके से इस बारे में सोच नहीं कर रहा हूँ कर रहा हूँ।

क्या कोई मुझे सही दिशा में इंगित कर सकता है?

Answer 1

कक्षाओं की सूची घटक की स्थिति से प्राप्त की जा सकती है। उदाहरण के लिए:

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 घटक के एक rerender ट्रिगर किया जाएगा।

Answer 2

div करने के लिए रेफरी विशेषता जोड़ें:

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

फिर handleClick विधि में रेफरी द्वारा तत्व हो और का उपयोग जावास्क्रिप्ट classList संपत्ति:

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