So erstellen Sie eine kontrollierte Eingabe mit leerem Standard in React 15

Ich habe ein Problem mit einer Texteingabe, die gesteuert werden soll, aber einen leeren Wert unterstützen muss. Hier ist meine Komponente:

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;

Wenn dies initial gemountet wird, wird props.value normalerweise (wenn auch nicht immer) auf '' gesetzt. Dies macht React 15 unglücklich, da value = '' bewirkt, dass der Wert gelöscht wird, und React denkt, dass es sich um eine unkontrollierte Eingabe handelt, obwohl sie einen onChange-Wert enthält.

Die Komponente funktioniert, aber mir gefällt diese Warnung in der Konsole nicht:

Warnung: FormControl ändert eine kontrollierte Eingabe von Texttypen so, dass sie nicht mehr kontrolliert wird. Eingabeelemente sollten nicht von gesteuert auf unkontrolliert umschalten (oder umgekehrt). Entscheiden Sie sich für die Lebensdauer der Komponente zwischen der Verwendung eines gesteuerten oder eines nicht gesteuerten Eingabeelements. Mehr Info:http: //facebook.github.io/react/docs/forms.html#controlled-component

Dies hat in 0.14.x ohne Vorwarnung gut funktioniert, aber jetzt scheint es 15 nicht zu gefallen. Wie räume ich es auf, um die Funktionalität zu erhalten, aber die Warnung zu beseitigen?

Antworten auf die Frage(2)

Ihre Antwort auf die Frage