React.js

Question

में divs के साथ क्लिक करने के लिए कैसे उपयोग करें मैं एक बहुत ही सरल एप्लिकेशन बना रहा हूं जहां आप अपने रंग को सफेद से काले रंग में बदलने के लिए स्क्वायर divs पर क्लिक कर सकते हैं। हालांकि, मुझे परेशानी हो रही है। मैं ऑनक्लिक फ़ंक्शन का उपयोग करना चाहता हूं ताकि उपयोगकर्ता अपने रंग को बदलने के लिए स्क्वायर पर क्लिक कर सके, लेकिन ऐसा लगता है कि यह काम नहीं कर रहा है। मैंने स्पैन और खाली पी टैग का उपयोग करने का प्रयास किया है, लेकिन यह या तो काम नहीं करता है।

var Box = React.createClass({ 
    getInitialState: function() { 
     return { 
      color: 'white' 
     }; 
    }, 

    changeColor: function() { 
     var newColor = this.state.color == 'white' ? 'black' : 'white'; 
     this.setState({ 
      color: newColor 
     }); 
    }, 

    render: function() { 
     return (
      <div> 
       <div 
        style = {{background: this.state.color}} 
        onClick = {this.changeColor} 
       > 
       </div> 
      </div> 
     ); 
    } 
}); 

यहाँ CodePen पर मेरी छोटी परियोजना के लिए एक लिंक है:

यहाँ प्रश्न में कोड है। http://codepen.io/anfperez/pen/RorKge

Answer 1

यह काम करता है

var Box = React.createClass({ 
getInitialState: function() { 
    return { 
     color: 'white' 
    }; 
}, 

changeColor: function() { 
    var newColor = this.state.color == 'white' ? 'black' : 'white'; 
    this.setState({ color: newColor }); 
}, 

render: function() { 
    return (
    <div > 
    <div className='box' style={{background:this.state.color}} onClick={this.changeColor}> In here already 
    </div> 
    </div> 
    ); 
} 
}); 
ReactDOM.render(<Box />, document.getElementById('div1')); 

ReactDOM.render(<Box />, document.getElementById('div2')); 

ReactDOM.render(<Box />, document.getElementById('div3')); 

और अपने सीएसएस में, शैली आप हटा सकते हैं और इस

डाल

.box { 
    width: 200px; 
    height: 200px; 
    border: 1px solid black; 
    float: left; 
} 

आपको वास्तविक div को स्टाइल करना होगा जिसे आप 012 पर कॉल कर रहे हैंचालू। Div को एक वर्गनाम दें और फिर इसे स्टाइल करें। इसके अलावा इस ब्लॉक जहां डोम में App प्रदान कर रहे हैं दूर करने के लिए याद है, अनुप्रयोग से परिभाषित नहीं है

ReactDOM.render(<App />,document.getElementById('root')); 

Answer 2

आपके बॉक्स में कोई आकार नहीं है। आप की चौड़ाई और ऊंचाई सेट करते हैं, यह सिर्फ ठीक काम करता है:

var Box = React.createClass({ 
 
    getInitialState: function() { 
 
     return { 
 
      color: 'black' 
 
     }; 
 
    }, 
 

 
    changeColor: function() { 
 
     var newColor = this.state.color == 'white' ? 'black' : 'white'; 
 
     this.setState({ 
 
      color: newColor 
 
     }); 
 
    }, 
 

 
    render: function() { 
 
     return (
 
      <div> 
 
       <div 
 
        style = {{ 
 
         background: this.state.color, 
 
         width: 100, 
 
         height: 100 
 
        }} 
 
        onClick = {this.changeColor} 
 
       > 
 
       </div> 
 
      </div> 
 
     ); 
 
    } 
 
}); 
 

 
ReactDOM.render(
 
    <Box />, 
 
    document.getElementById('box') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='box'></div>

Answer 3

मैं सिर्फ react.js के लिए एक सरल परीक्षण बटन की जरूरत है। यहां मैंने जो किया और यह काम किया।

function Testing(){ 
var f=function testing(){ 
     console.log("Testing Mode activated"); 
     UserData.authenticated=true; 
     UserData.userId='123'; 
     }; 
console.log("Testing Mode"); 

return (<div><button onClick={f}>testing</button></div>); 
} 

Answer 4

यह भी काम करता है:

मैं सिर्फ this.state.color==='white'?'black':'white' साथ बदल दिया है।

आप ड्रॉप-डाउन मानों से रंग भी चुन सकते हैं और 'काला' के स्थान पर अपडेट कर सकते हैं;

(CodePen)