Как создать контролируемый вход с пустым значением по умолчанию в React 15
У меня проблема с вводом текста, которым я хочу управлять, но он должен поддерживать пустое значение. Вот мой компонент:
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;
Когда это изначально смонтировано, props.value обычно (хотя и не всегда) имеет значение ''. Это делает React 15 несчастным, так как значение = '' приводит к тому, что значение сбрасывается, поэтому React считает, что это неконтролируемый ввод, даже если он имеет onChange.
Компонент работает, но мне не нравится получать это предупреждение в консоли:
Предупреждение: FormControl меняет контролируемый ввод текста типа на неуправляемый. Входные элементы не должны переключаться с контролируемого на неуправляемый (или наоборот). Выберите между использованием контролируемого или неконтролируемого элемента ввода в течение срока службы компонента. Больше информации:http://facebook.github.io/react/docs/forms.html#controlled-components
Это работало нормально в 0.14.x без каких-либо предупреждений, но теперь 15, похоже, не нравится. Как мне очистить его, чтобы сохранить функциональность, но избавиться от предупреждения?