So erstellen Sie eine kontrollierte Eingabe mit leeren Standard in Reagieren 15

Question

Ich habe ein Problem mit einer Texteingabe, die ich gesteuert werden soll, aber es muss einen leeren Wert unterstützen. 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 diese zunächst montiert ist, props.value ist häufig (aber nicht immer) auf ‚‘. Dies macht React 15 unglücklich, da value = '' den Wert fallen lässt, so dass React denkt, dass es eine unkontrollierte Eingabe ist, obwohl es einen onChange hat.

Die Komponente funktioniert, aber ich weiß nicht, wie diese Warnung in der Konsole bekommen:

Warnung: Formcontrol einen kontrollierten Eingang des Typs Text verändert werden unkontrolliert. Eingabeelemente sollten nicht von unkontrolliert auf umschalten (oder umgekehrt). Entscheiden Sie, ob Sie für die Lebensdauer der Komponente ein gesteuertes oder unkontrolliertes Eingangselement verwenden möchten. Mehr Info: http://facebook.github.io/react/docs/forms.html#controlled-components

Dies funktionierte gut in 0.14.x ohne Warnungen, aber jetzt 15 scheint es nicht zu mögen. Wie reinige ich es, um die Funktionalität zu behalten, aber die Warnung loszuwerden?

Answer 1

Stellen Sie sicher, dass this.state.value beim Mount nicht definiert ist. Sie können dies in Ihrem Konstruktor tun, indem Sie this.state = {value: props.value || ''}; oder props.value als erforderliche Eigenschaft festlegen.