Como criar uma entrada controlada com o padrão vazio no React 15
Estou tendo um problema com uma entrada de texto que quero controlar, mas ela precisa oferecer suporte a um valor vazio. Aqui está o meu 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;
Quando isso é montado inicialmente, props.value geralmente é (embora nem sempre) definido como ''. Isso faz com que o React 15 seja infeliz, pois value = '' faz com que o valor seja descartado; portanto, o React acha que é uma entrada não controlada, mesmo que tenha um onChange.
O componente funciona, mas não gosto de receber este aviso no console:
Aviso: O FormControl está alterando uma entrada controlada do tipo de texto para não ser controlada. Os elementos de entrada não devem mudar de controlado para não controlado (ou vice-versa). Decida entre usar um elemento de entrada controlado ou não controlado durante a vida útil do componente. Mais informações:http://facebook.github.io/react/docs/forms.html#controlled-components
Isso funcionou bem no 0.14.x sem nenhum aviso, mas agora 15 parece não gostar. Como faço para limpá-lo para manter a funcionalidade, mas me livrar do aviso?