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>
);
}
});
this.setState({checked: !this.state.checked})
einfacher ist als das Speichern eines Werts. Dann ein ternärer Operator im geprüften Attribut:checked={this.state.checked ? 'checked': null}
this.refs.complete.getDOMNode().checked
. siehe fiddle jsfiddle.net/d10xyqu1Antworten:
Um den aktivierten Status Ihres Kontrollkästchens zu erhalten, lautet der Pfad wie folgt:
Die Alternative besteht darin, es von dem an die
handleChange
Methode übergebenen Ereignis abzurufen :quelle
checked
für kontrollierte Komponenten verwenden: /checked
bedeutet, dass der Status außerhalb der Komponente verwaltet wird. Wenn der Benutzer auf klickt, kann nichts aufgerufen werden,handleChange
da kein Status aktualisiert wird. Stattdessen müssten Sie dort auf eine Statusaktualisierung wartenonClick
und diese auslösen.In solchen Fällen ist es besser, keine Refs zu verwenden. Verwenden:
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
checked
Attribut für dasinput
Element vorhanden ist.quelle
In dem Szenario, in dem Sie den onChange-Handler NICHT für das Eingabe-DOM verwenden möchten, können Sie die
onClick
Eigenschaft alternativ verwenden. DiedefaultChecked
Bedingung kann einen festen Zustand für v16 IINM hinterlassen.Ich hoffe das hilft jemandem in der Zukunft.
quelle
Wenn Sie eine
handleChange
Funktion haben, die so aussieht:Sie können eine benutzerdefinierte
onChange
Funktion so erstellen , dass sie sich wie eine Texteingabe verhält:quelle
handleChange
aufinput
sollte seinthis.handleChange
?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):
quelle
onChange ruft handleChange auf Mobilgeräten nicht auf, wenn defaultChecked verwendet wird. Alternativ können Sie onClick und onTouchEnd verwenden.
quelle
In der Material-Benutzeroberfläche kann der Status des Kontrollkästchens als abgerufen werden
quelle