Cómo crear una entrada controlada con valor predeterminado vacío en React 15
Tengo un problema con una entrada de texto que deseo que se controle, pero debe admitir un valor vacío. Aquí está mi componente:
import React, { Component, PropTypes } from 'react';
import { ControlLabel, FormControl, FormGroup } from 'react-bootstrap';
const propTypes = {
id: PropTypes.string.isRequired,
label: PropTypes.string,
onChange: PropTypes.func,
upperCaseOnly: PropTypes.bool,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};
export default class UppercaseTextField extends Component {
constructor(props) {
super();
this.state = { value: props.value };
this.onChange = () => this.onChange();
}
onChange(e) {
let value = e.target.value;
if (this.props.upperCaseOnly) {
value = value.toUpperCase();
}
this.setState({ value });
this.props.onChange(e);
}
render() {
return (
<FormGroup controlId={id}>
<ControlLabel>{this.props.label}</ControlLabel>
<FormControl
type="text"
onChange={this.onChange}
defaultValue={this.props.value}
value={this.state.value}
/>
</FormGroup>
);
}
}
UppercaseTextField.propTypes = propTypes;
Cuando esto se monta inicialmente, props.value se establece comúnmente (aunque no siempre) en ''. Esto hace que React 15 sea infeliz, ya que value = '' hace que el valor se caiga, por lo que React piensa que es una entrada no controlada, a pesar de que tiene un onChange.
El componente funciona, pero no me gusta recibir esta advertencia en la consola:
Advertencia: FormControl está cambiando una entrada controlada de texto de tipo para que no esté controlada. Los elementos de entrada no deben cambiar de controlado a no controlado (o viceversa). Decida entre usar un elemento de entrada controlado o no controlado durante la vida útil del componente. Más información:http://facebook.github.io/react/docs/forms.html#controlled-components
Esto funcionó bien en 0.14.x sin ninguna advertencia, pero ahora 15 parece no gustarle. ¿Cómo lo limpio para mantener la funcionalidad pero me deshago de la advertencia?