Bereaksi Kotak centang tidak mengirim onChange

TLDR: Gunakan defaultChecked alih-alih dicentang, bekerja jsbin .

Mencoba mengatur kotak centang sederhana yang akan mencoret teks labelnya ketika dicentang. Untuk beberapa alasan handleChange tidak dipecat ketika saya menggunakan komponen. Adakah yang bisa menjelaskan kesalahan saya?

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

Pemakaian:

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

Larutan:

Menggunakan dicentang tidak membiarkan nilai yang mendasarinya berubah (tampaknya) dan dengan demikian tidak memanggil penangan onChange. Beralih ke defaultChecked tampaknya memperbaiki ini:

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

Untuk mendapatkan status yang dicentang dari kotak centang Anda, pathnya adalah:

this.refs.complete.state.checked

Alternatifnya adalah mendapatkannya dari acara yang diteruskan ke handleChangemetode:

event.target.checked

Lebih baik tidak menggunakan referensi dalam kasus seperti itu. Menggunakan:

<input
    type="checkbox"
    checked={this.state.active}
    onClick={this.handleClick}
/>

Ada beberapa opsi:

checked vs. defaultChecked

Yang pertama akan menanggapi perubahan status dan klik. Yang terakhir akan mengabaikan perubahan status.

onClick vs. onChange

Yang pertama akan selalu memicu klik. Yang terakhir tidak akan memicu klik jika checkedatribut ada pada inputelemen.

Dalam skenario Anda TIDAK ingin menggunakan penangan onChange pada input DOM, Anda dapat menggunakan onClickproperti sebagai alternatif. The defaultChecked, kondisi dapat meninggalkan kondisi tetap untuk 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>
        )
    }
 }

Saya harap ini membantu seseorang di masa depan.

Jika Anda memiliki handleChangefungsi yang terlihat seperti ini:

handleChange = (e) => {
  this.setState({
    [e.target.name]: e.target.value,
  });
}

Anda dapat membuat onChangefungsi khusus sehingga berfungsi seperti input teks:

<input
  type="checkbox"
  name="check"
  checked={this.state.check}
  onChange={(e) => {
    this.handleChange({
      target: {
        name: e.target.name,
        value: e.target.checked,
      },
    });
  }}
/>

Jika seseorang mencari pengatur kejadian universal, kode berikut ini dapat digunakan lebih atau kurang (dengan asumsi bahwa properti nama diset untuk setiap input):

    this.handleInputChange = (e) => {
        item[e.target.name] = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    }

onChange tidak akan memanggil handleChange di ponsel saat menggunakan defaultChecked. Sebagai alternatif, Anda dapat menggunakan onClick dan onTouchEnd.

<input onClick={this.handleChange} onTouchEnd={this.handleChange} type="checkbox" defaultChecked={!!this.state.complete} />;

Dalam materi ui, keadaan kotak centang dapat diambil sebagai

this.refs.complete.state.switched