प्रतिक्रिया का चयन onChange काम नहीं कर रहा

Question

JsFiddle: https://jsfiddle.net/69z2wepo/9956/

मैं अपने react.js कोड में समारोह प्रस्तुत करना में एक का चयन तत्व लौट रहा हूँ।

लेकिन जब भी मैं select मान बदलता हूं, onChange में फ़ंक्शन ट्रिगर नहीं हो रहा है।

var Hello = React.createClass({ 
render: function() { 
    return <select id="data-type" onChange={changeDataType()}> 
      <option selected="selected" value="user" data-type="enum">User</option> 
      <option value="HQ center" data-type="text">HQ Center</option> 
      <option value="business unit" data-type="boolean">Business Unit</option> 
      <option value="note" data-type="date">Try on </option> 
      <option value="con" data-type="number">Con</option> 
     </select> 
    } 
}); 


React.render(<Hello/>, document.getElementById('container')); 

function changeDataType() { 
    console.log("entered"); 
} 

यह फ़ंक्शन केवल एक बार शुरू हो रहा हो रही है जब चयन भरी हुई है और बाद में जब मैं मान बदलने, अपने शुरू हो रही नहीं।

Answer 1

onChange एक फ़ंक्शन लेता है।

आप इसे changeDataType() पास कर रहे हैं, जो फ़ंक्शन changeDataType फ़ंक्शन चला रहा है, और onChange को इसके वापसी मूल्य पर सेट कर रहा है, जो शून्य है।

फ़ंक्शन का मूल्यांकन करने के बजाय वास्तविक फ़ंक्शन को पार करने का प्रयास करें।

<select id="data-type" onChange={changeDataType}>

Answer 2

कार्य पर ट्रिगर होने एक घटक परिवर्तन वास्तव में घटक के अंदर ही परिभाषित किया जाना चाहिए।

मैं बहुत की तरह अपने Hello घटक के अंदर अपने कार्य को परिभाषित करने, और अपने onChange विशेषता को this.changeDataType गुजर, सलाह देते हैं:

var Hello = React.createClass({ 
changeDataType: function() { 
    console.log('entered'); 
}, 
render: function() { 
    return <select id="data-type" onChange={this.changeDataType}> 
      <option selected="selected" value="user" data-type="enum">User</option> 
      <option value="HQ center" data-type="text">HQ Center</option> 
      <option value="business unit" data-type="boolean">Business Unit</option> 
      <option value="note" data-type="date">Try on </option> 
      <option value="con" data-type="number">Con</option> 
     </select> 
    } 
}); 

यहाँ एक अद्यतन JSFiddle कि आपके अपेक्षित व्यवहार का उत्पादन होता है: https://jsfiddle.net/69z2wepo/9958/