Ich habe die folgende Komponente ( radioOther.jsx
):
'use strict';
//module.exports = <-- omitted in update
class RadioOther extends React.Component {
// omitted in update
// getInitialState() {
// propTypes: {
// name: React.PropTypes.string.isRequired
// }
// return {
// otherChecked: false
// }
// }
componentDidUpdate(prevProps, prevState) {
var otherRadBtn = this.refs.otherRadBtn.getDOMNode();
if (prevState.otherChecked !== otherRadBtn.checked) {
console.log('Other radio btn clicked.')
this.setState({
otherChecked: otherRadBtn.checked,
});
}
}
onRadChange(e) {
var input = e.target;
this.setState({
otherChecked: input.checked
});
}
render() {
return (
<div>
<p className="form-group radio">
<label>
<input type="radio"
ref="otherRadBtn"
onChange={this.onRadChange}
name={this.props.name}
value="other"/>
Other
</label>
{this.state.otherChecked ?
(<label className="form-inline">
Please Specify:
<input
placeholder="Please Specify"
type="text"
name="referrer_other"
/>
</label>)
:
('')
}
</p>
</div>
)
}
};
Vor der Verwendung von ECMAScript6 war alles in Ordnung, jetzt erhalte ich 1 Fehler, 1 Warnung und ich habe eine Folgefrage:
Fehler: Nicht erfasst TypeError: Die Eigenschaft 'otherChecked' von null kann nicht gelesen werden
Warnung: getInitialState wurde in RadioOther definiert, einer einfachen JavaScript-Klasse. Dies wird nur für Klassen unterstützt, die mit React.createClass erstellt wurden. Wollten Sie stattdessen eine Staatseigenschaft definieren?
Kann jemand sehen, wo der Fehler liegt, ich weiß, dass es an der bedingten Anweisung im DOM liegt, aber anscheinend deklariere ich seinen Anfangswert nicht richtig?
Soll ich getInitialState statisch machen ?
Wo kann ich meine Proptypen deklarieren, wenn getInitialState nicht korrekt ist?
AKTUALISIEREN:
RadioOther.propTypes = {
name: React.PropTypes.string,
other: React.PropTypes.bool,
options: React.PropTypes.array }
module.exports = RadioOther;
@ssorallen, dieser Code:
constructor(props) {
this.state = {
otherChecked: false,
};
}
produziert "Uncaught ReferenceError: this is not defined"
, und während unten korrigiert das
constructor(props) {
super(props);
this.state = {
otherChecked: false,
};
}
Wenn Sie jetzt auf die andere Schaltfläche klicken, wird ein Fehler angezeigt:
Uncaught TypeError: Cannot read property 'props' of undefined
quelle
onChange={this.onRadChange}
,this
bezieht sich nicht auf die Instanz , wennonRadChange
aufgerufen wird. Sie müssen Rückrufe einbindenrender
oder im Konstruktor ausführen :onChange={this.onRadChange.bind(this)}
.Antworten:
getInitialState
wird in ES6-Klassen nicht verwendet. Weisen Sie stattdessenthis.state
im Konstruktor zu.propTypes
sollte eine statische Klassenvariable sein oder der Klasse zugewiesen sein, sollte sie nicht Komponenteninstanzen zugewiesen werden.Weitere Informationen finden Sie in der React-Dokumentation zu ES6-Klassen: Konvertieren einer Funktion in eine Klasse
quelle
Uncaught TypeError: Cannot read property 'bind' of undefined
Fehler Irgendwelche Ideen?render
Sie könnten so etwas tunonClick={this.doFoo.bind(this)}
, aber ich habe es absichtlich nicht in den Code aufgenommen, da dies die am wenigsten effiziente Art des Bindens ist, darender
es häufig aufgerufen werden kann und bei jedem Aufruf neue Funktionen erstellen würde. Ich werde diese Sprache aus der Antwort entfernen.Hinzufügen zu Ross ' Antwort.
Sie können auch die neue ES6- Pfeilfunktion für die onChange-Eigenschaft verwenden
Es entspricht funktional der Definition
this.onRadChange = this.onRadChange.bind(this);
im Konstruktor, ist aber meiner Meinung nach prägnanter.In Ihrem Fall sieht das Optionsfeld wie folgt aus.
Aktualisieren
Diese "präzisere" Methode ist weniger effizient als die in der Antwort von @Ross Allen genannten Optionen, da sie bei jedem
render()
Aufruf der Methode eine neue Funktion generiertquelle
render
(die häufig aufgerufen werden kann). Durch Verwendung eines Klasseneigenschaftsinitialisierers oder einer Bindung im Konstruktor wird beim Erstellen der Komponente nur eine neue gebundene Funktion erstellt, und währenddessen werden keine neuen Funktionen erstelltrender
.Wenn Sie babel-plugin-transform-class-properties oder babel-preset-stage-2 (oder stage-1 oder stage-0) verwenden, können Sie diese Syntax verwenden:
quelle