TLDR: Verwende defaultChecked anstelle von checked und arbeite hier mit jsbinhttp: //jsbin.com/mecimayawe/1/edit? js, output

Versuchen Sie, ein einfaches Kontrollkästchen einzurichten, dessen Bezeichnungstext durchgestrichen wird, 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>
    );
  }
});

Verwendung

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

Lösung

Using checked lässt den zugrunde liegenden Wert (scheinbar) nicht ändern und ruft daher den onChange-Handler nicht auf. Das 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>
    );
  }
});