Reagieren Checkbox nicht onChange

Question

TLDR Senden: Verwenden Sie defaultChecked statt geprüft, Arbeits jsbin hier http://jsbin.com/mecimayawe/1/edit?js,output

Der Versuch, die Einrichtung ein einfaches Kontrollkästchen, das das Etikett Text überqueren, wenn es aktiviert ist. Aus irgendeinem Grund wird handleChange nicht ausgelöst, wenn ich die Komponente verwende. Kann mir jemand erklären, was ich falsch mache?

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> 
    ); 
    } 
}); 

Verbrauch:

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

Lösung:

geprüft verwenden, nicht die zugrunde liegende Wertänderung (scheinbar) lassen und somit nicht den onChange Handler nicht nennen. Umschalten auf defaultChecked scheint dies zu beheben:

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

Um den Überprüfungsstatus Ihrer Checkbox zu erhalten der Weg wäre:

this.refs.complete.state.checked 

Die Alternative ist es von der Veranstaltung in die handleChange Methode übergeben zu bekommen:

event.target.checked 

Answer 2

In Material ui, Bundesstaat Ankreuzfeld kann als

01 abgerufen werden,

Answer 3

In dem Szenario, in dem Sie nicht möchten, den onChange-Handler für das Eingabe-DOM zu verwenden, können Sie die onClick-Eigenschaft als eine Alternative verwenden. Die defaultChecked, die Bedingung kann einen festen Zustand für V16 IINM verlassen.

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> 
     ) 
    } 
} 

Ich hoffe, dass dies jemand in der Zukunft hilft.