चेकबॉक्स प्रतिक्रिया नहीं भेज onChange

Question

TLDR:, उपयोग defaultChecked बजाय जाँच यहाँ http://jsbin.com/mecimayawe/1/edit?js,output

jsbin काम कर सेटअप करने के लिए एक सरल चेकबॉक्स कि अपनी लेबल पाठ से पता लगा जब यह चेक किया गया है जाएगा कोशिश कर रहा है। कुछ कारणों से हैंडल चेंज को घटक का उपयोग करते समय निकाल दिया नहीं जा रहा है। क्या कोई समझा सकता है कि मैं क्या गलत कर रहा हूं?

var CrossoutCheckbox = React.createClass({ 
    getInitialState: function() { 
    return { 
     complete: (!!this.props.complete) || false 
     }; 
    }, 
    handleChange: function(){ 
    console.log('handleChange', this.refs.complete.checked); // Never gets logged 
    this.setState({ 
     complete: this.refs.complete.checked 
    }); 
    }, 
    render: function(){ 
    var labelStyle={ 
     'text-decoration': this.state.complete?'line-through':'' 
    }; 
    return (
     <span> 
     <label style={labelStyle}> 
      <input 
      type="checkbox" 
      checked={this.state.complete} 
      ref="complete" 
      onChange={this.handleChange} 
      /> 
      {this.props.text} 
     </label> 
     </span> 
    ); 
    } 
}); 

उपयोग:

React.renderComponent(CrossoutCheckbox({text: "Text Text", complete: false}), mountNode); 

समाधान:

जाँच का उपयोग नहीं करता है अंतर्निहित कीमत परिवर्तन (जाहिरा तौर पर) और इस तरह onChange हैंडलर फोन नहीं करता है।

var CrossoutCheckbox = React.createClass({ 
    getInitialState: function() { 
    return { 
     complete: (!!this.props.complete) || false 
     }; 
    }, 
    handleChange: function(){ 
    this.setState({ 
     complete: !this.state.complete 
    }); 
    }, 
    render: function(){ 
    var labelStyle={ 
     'text-decoration': this.state.complete?'line-through':'' 
    }; 
    return (
     <span> 
     <label style={labelStyle}> 
      <input 
      type="checkbox" 
      defaultChecked={this.state.complete} 
      ref="complete" 
      onChange={this.handleChange} 
      /> 
      {this.props.text} 
     </label> 
     </span> 
    ); 
    } 
}); 

Answer 1

अपने चेकबॉक्स की जाँच की राज्य पथ होगा प्राप्त करने के लिए: defaultChecked को स्विचिंग इसे ठीक करने लगता है

this.refs.complete.state.checked 

विकल्प घटना handleChange विधि में पारित से इसे पाने के लिए है:

event.target.checked 

Answer 2

सामग्री UI में, चेकबॉक्स का राज्य

01 के रूप में दिलवाया जा सकता है

Answer 3

परिदृश्य में आप इनपुट डॉम पर ऑन चेंज हैंडलर का उपयोग नहीं करना चाहते हैं, तो आप onClick संपत्ति का उपयोग वैकल्पिक रूप से कर सकते हैं। defaultChecked, स्थिति v16 IINM के लिए एक निश्चित स्थिति छोड़ सकती है।

class CrossOutCheckbox extends Component { 
     constructor(init){ 
      super(init); 
      this.handleChange = this.handleChange.bind(this); 
     } 
     handleChange({target}){ 
      if (target.checked){ 
      target.removeAttribute('checked'); 
      target.parentNode.style.textDecoration = ""; 
      } else { 
      target.setAttribute('checked', true); 
      target.parentNode.style.textDecoration = "line-through"; 
      } 
     } 
     render(){ 
     return (
      <span> 
       <label style={{textDecoration: this.props.complete?"line-through":""}}> 
       <input type="checkbox" 
         onClick={this.handleChange} 
         defaultChecked={this.props.complete} 
        /> 
       </label> 
       {this.props.text} 
      </span> 
     ) 
    } 
} 

मुझे उम्मीद है कि यह भविष्य में किसी की मदद करेगा।