onChange

Question

TLDR göndermiyor Checkbox yanıt verin. Bir sebepten dolayı bileşeni kullandığımda handleChange çalışmıyor. Herkes yanlış yaptığımı açıklayabilir mi?

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

Kullanımı:

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

Çözüm:

onChange işleyicisi çağırmaz böylece altta yatan değer değişikliği (görünüşte) izin vermez kontrol ve kullanma.

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

yol olacağını sizin onay kutusu işaretli durumunu almak için: defaultChecked için Geçiş Bunu düzeltmek gibi görünüyor

this.refs.complete.state.checked 

alternatif handleChange yönteme geçirilen etkinliğinden elde etmektir: malzeme arayüzünde

event.target.checked 

Answer 2

, onay kutusu durumu

01 olarak getirilen edilebilir

Answer 3

Senaryoda DOM girişindeki onChange işleyicisini kullanmak istemezseniz, onClick özelliğini alternatif olarak kullanabilirsiniz. defaultChecked, koşul v16 IINM için sabit bir durum bırakabilir.

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

Umarım bu, gelecekte birilerine yardımcı olur.