Tengo el siguiente componente ( 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>
)
}
};
Antes de usar ECMAScript6 todo estaba bien, ahora recibo 1 error, 1 advertencia y tengo una pregunta de seguimiento:
Error: no detectado TypeError: no se puede leer la propiedad 'otherChecked' de null
Advertencia: getInitialState se definió en RadioOther, una clase de JavaScript simple. Esto solo es compatible con las clases creadas con React.createClass. ¿Quería definir una propiedad estatal en su lugar?
¿Alguien puede ver dónde se encuentra el error, sé que se debe a la declaración condicional en el DOM, pero aparentemente no estoy declarando su valor inicial correctamente?
¿Debo hacer getInitialState estático?
¿Dónde está el lugar apropiado para declarar mis proptypes si getInitialState no es correcto?
ACTUALIZAR:
RadioOther.propTypes = {
name: React.PropTypes.string,
other: React.PropTypes.bool,
options: React.PropTypes.array }
module.exports = RadioOther;
@ssorallen, este código:
constructor(props) {
this.state = {
otherChecked: false,
};
}
produce "Uncaught ReferenceError: this is not defined"
, y mientras que a continuación corrige que
constructor(props) {
super(props);
this.state = {
otherChecked: false,
};
}
pero ahora, hacer clic en el otro botón ahora produce un error:
Uncaught TypeError: Cannot read property 'props' of undefined
onChange={this.onRadChange}
,this
no se refiere a la instancia cuandoonRadChange
se llama. Es necesario que las devoluciones de llamada se unen enrender
o hacerlo en el constructor:onChange={this.onRadChange.bind(this)}
.