मेरे पास निम्नलिखित घटक हैं ( 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>
)
}
};ECMAScript6 का उपयोग करने से पहले सब ठीक था, अब मुझे 1 त्रुटि, 1 चेतावनी मिल रही है और मेरे पास एक फॉलोअप प्रश्न है:
त्रुटि: बिना पढ़ा हुआ टाइपर्रर: प्रॉपर्टी को 'null के अन्य अनियंत्रित' नहीं पढ़ सकता
चेतावनी: getInitialState को RadioOther पर परिभाषित किया गया, जो एक सामान्य जावास्क्रिप्ट वर्ग है। यह केवल React.createClass का उपयोग करके बनाई गई कक्षाओं के लिए समर्थित है। क्या आपको इसके बजाय एक राज्य संपत्ति को परिभाषित करने का मतलब था?
क्या कोई देख सकता है कि त्रुटि कहाँ है, मुझे पता है कि यह DOM में सशर्त विवरण के कारण है, लेकिन जाहिर है कि मैं इसके प्रारंभिक मूल्य को सही ढंग से घोषित नहीं कर रहा हूं?
क्या मुझे getInitialState को स्थिर बनाना चाहिए
अगर मेरी इंक्रीप्ट घोषित करने के लिए उपयुक्त जगह है, तो getInitialState सही नहीं है?
अपडेट करें:
RadioOther.propTypes = {
name: React.PropTypes.string,
other: React.PropTypes.bool,
options: React.PropTypes.array }
module.exports = RadioOther;यह कोड:
constructor(props) {
this.state = {
otherChecked: false,
};
}उत्पादन करता है "Uncaught ReferenceError: this is not defined", और नीचे सही करता है
constructor(props) {
super(props);
this.state = {
otherChecked: false,
};
}लेकिन अब, दूसरे बटन पर क्लिक करने से अब त्रुटि उत्पन्न होती है:
Uncaught TypeError: Cannot read property 'props' of undefined
onChange={this.onRadChange},thisतो उदाहरण के लिए संदर्भित नहीं होताonRadChangeहै जब कॉल किया जाता है। आपको कॉलबैक को बांधनेrenderया निर्माणकर्ता में करने की आवश्यकता हैonChange={this.onRadChange.bind(this)}:।