Reagieren Sie das Kontrollkästchen, das onChange nicht sendet

TLDR: Verwenden Sie defaultChecked anstelle von aktiviertem , funktionierendem jsbin .

Es wird versucht, ein einfaches Kontrollkästchen einzurichten, bei dem der Beschriftungstext 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:

Durch die Verwendung von "Check" wird der zugrunde liegende Wert (anscheinend) nicht geändert, und der onChange-Handler wird nicht aufgerufen. Das Wechseln zu 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>
    );
  }
});

Um den aktivierten Status Ihres Kontrollkästchens zu erhalten, lautet der Pfad wie folgt:

this.refs.complete.state.checked

Die Alternative besteht darin, es von dem an die handleChangeMethode übergebenen Ereignis abzurufen :

event.target.checked

In solchen Fällen ist es besser, keine Refs zu verwenden. Verwenden:

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

Es gibt einige Optionen:

checked vs. defaultChecked

Ersteres würde sowohl auf Statusänderungen als auch auf Klicks reagieren . Letzteres würde Zustandsänderungen ignorieren.

onClick vs. onChange

Ersteres würde immer bei Klicks ausgelöst. Letzteres würde bei Klicks nicht ausgelöst, wenn das checkedAttribut für das inputElement vorhanden ist.

In dem Szenario, in dem Sie den onChange-Handler NICHT für das Eingabe-DOM verwenden möchten, können Sie die onClickEigenschaft alternativ verwenden. Die defaultCheckedBedingung kann einen festen Zustand für v16 IINM hinterlassen.

 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 das hilft jemandem in der Zukunft.

Wenn Sie eine handleChangeFunktion haben, die so aussieht:

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

Sie können eine benutzerdefinierte onChangeFunktion so erstellen , dass sie sich wie eine Texteingabe verhält:

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

Falls jemand für einen universellen Event - Handler kann der folgende Code mehr oder weniger verwendet werden (unter der Annahme , dass Name - Eigenschaft wird für jeden Eingang eingestellt):

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

onChange ruft handleChange auf Mobilgeräten nicht auf, wenn defaultChecked verwendet wird. Alternativ können Sie onClick und onTouchEnd verwenden.

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

In der Material-Benutzeroberfläche kann der Status des Kontrollkästchens als abgerufen werden

this.refs.complete.state.switched