Reagieren - Ändern eines unkontrollierten Eingangs

Ich habe eine einfache Reaktionskomponente mit der Form, von der ich glaube, dass sie eine kontrollierte Eingabe hat:

import React from 'react';

export default class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <form className="add-support-staff-form">
                <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/>
            </form>
        )
    }

    onFieldChange(fieldName) {
        return function (event) {
            this.setState({[fieldName]: event.target.value});
        }
    }
}

export default MyForm;

Wenn ich meine Anwendung ausführe, wird folgende Warnung angezeigt:

Warnung: MyForm ändert eine unkontrollierte Eingabe von zu steuerndem Text. Eingangselemente sollten nicht von unkontrolliert zu kontrolliert (oder umgekehrt) wechseln. Entscheiden Sie sich für die Lebensdauer der Komponente zwischen der Verwendung eines gesteuerten oder unkontrollierten Eingabeelements

Ich glaube, meine Eingabe wird gesteuert, da sie einen Wert hat. Ich frage mich, was mache ich falsch?

Ich benutze React 15.1.0

Ich glaube, meine Eingabe wird gesteuert, da sie einen Wert hat.

Damit ein Eingang gesteuert werden kann, muss sein Wert dem einer Zustandsvariablen entsprechen.

Diese Bedingung ist in Ihrem Beispiel zunächst nicht erfüllt, da this.state.namesie zunächst nicht festgelegt ist. Daher ist die Eingabe zunächst unkontrolliert. Sobald der onChangeHandler zum ersten Mal ausgelöst wird, this.state.namewird gesetzt. Zu diesem Zeitpunkt ist die obige Bedingung erfüllt und die Eingabe wird als gesteuert betrachtet. Dieser Übergang von unkontrolliert zu kontrolliert erzeugt den oben gezeigten Fehler.

Durch Initialisierung this.state.nameim Konstruktor:

z.B

this.state = { name: '' };

Die Eingabe wird von Anfang an gesteuert, um das Problem zu beheben. Siehe Reagieren kontrollierter KomponentenWeitere Beispiele finden .

Unabhängig von diesem Fehler sollten Sie nur einen Standardexport haben. Ihr Code oben hat zwei.

Wenn Sie Ihre Komponente zum ersten Mal rendern, this.state.nameist sie nicht festgelegt, sodass sie als undefinedoder ausgewertet nullwird und Sie am Ende value={undefined}oder value={null}an Ihre übergeben input.

Wenn ReactDOM prüft, ob ein Feld gesteuert wird, prüft es, ob es vorhanden istvalue != null (beachten Sie !=, dass dies nicht der!== ), und undefined == nullentscheidet in JavaScript, dass es nicht kontrolliert wird.

Wenn onFieldChange()also aufgerufen this.state.namewird, auf einen Zeichenfolgenwert gesetzt wird, geht Ihre Eingabe von unkontrolliert zu kontrolliert über.

Wenn Sie dies this.state = {name: ''}in Ihrem Konstruktor tun '' != null, hat Ihre Eingabe die ganze Zeit über einen Wert, und diese Nachricht verschwindet.

Ein anderer Ansatz könnte darin bestehen, den Standardwert in Ihrer Eingabe wie folgt festzulegen:

 <input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>

Ich weiß, dass andere dies bereits beantwortet haben. Aber ein sehr wichtiger Faktor, der anderen Menschen helfen kann, die ein ähnliches Problem haben:

onChangeIn Ihrem Eingabefeld muss ein Handler hinzugefügt sein (z. B. textField, Kontrollkästchen, Radio usw.). Behandeln Sie Aktivitäten immer über den onChangeHandler.

Beispiel:

<input ... onChange={ this.myChangeHandler} ... />

Wenn Sie mit Kontrollkästchen arbeiten Sie möglicherweise dessen checkedStatus mit bearbeiten !!.

Beispiel:

<input type="checkbox" checked={!!this.state.someValue} onChange={.....} >

Referenz: https://github.com/facebook/react/issues/6779#issuecomment-326314716

Eine einfache Lösung zur Behebung dieses Problems besteht darin, standardmäßig einen leeren Wert festzulegen:

<input name='myInput' value={this.state.myInput || ''} onChange={this.handleChange} />

Ein möglicher Nachteil beim Setzen des Feldwerts auf "" (leere Zeichenfolge) im Konstruktor besteht darin, dass das Feld ein optionales Feld ist und unbearbeitet bleibt. Sofern Sie vor dem Versenden Ihres Formulars keine Massagen durchführen, bleibt das Feld als leere Zeichenfolge anstelle von NULL in Ihrem Datenspeicher erhalten.

Diese Alternative vermeidet leere Zeichenfolgen:

constructor(props) {
    super(props);
    this.state = {
        name: null
    }
}

... 

<input name="name" type="text" value={this.state.name || ''}/>

Wenn Sie onChange={this.onFieldChange('name').bind(this)}in Ihrer Eingabe verwenden, müssen Sie Ihre leere Statuszeichenfolge als Wert des Eigenschaftsfelds deklarieren.

falscher Weg:

this.state ={
       fields: {},
       errors: {},
       disabled : false
    }

der richtige Weg:

this.state ={
       fields: {
         name:'',
         email: '',
         message: ''
       },
       errors: {},
       disabled : false
    }

In meinem Fall fehlte mir etwas wirklich Triviales.

<input value={state.myObject.inputValue} />

Mein Zustand war der folgende, als ich die Warnung erhielt:

state = {
   myObject: undefined
}

Durch Abwechseln meines Status, um auf die Eingabe meines Werts zu verweisen , wurde mein Problem gelöst:

state = {
   myObject: {
      inputValue: ''
   }
}

Wenn die Requisiten für Ihre Komponente als Status übergeben wurden, geben Sie einen Standardwert für Ihre Eingabe-Tags ein

<input type="text" placeholder={object.property} value={object.property ? object.property : ""}>

Setzen Sie im Ausgangszustand einen Wert auf die Eigenschaft 'name'.

this.state={ name:''};

Ein Update dafür. Für React Hooks verwendenconst [name, setName] = useState(" ")

Dies geschieht im Allgemeinen nur, wenn Sie den Wert der Datei beim Start der Anwendung nicht steuern und nachdem ein Ereignis oder eine Funktion ausgelöst oder der Status geändert wurde, versuchen Sie nun, den Wert im Eingabefeld zu steuern.

Dieser Übergang, keine Kontrolle über die Eingabe zu haben und dann die Kontrolle darüber zu haben, führt dazu, dass das Problem überhaupt erst auftritt.

Der beste Weg, dies zu vermeiden, besteht darin, einen Wert für die Eingabe im Konstruktor der Komponente zu deklarieren. Damit das Eingabeelement vom Start der Anwendung an Wert hat.

Um die Statuseigenschaften für Formulareingaben dynamisch festzulegen und zu steuern, können Sie Folgendes tun:

const inputs = [
    { name: 'email', type: 'email', placeholder: "Enter your email"},
    { name: 'password', type: 'password', placeholder: "Enter your password"},
    { name: 'passwordConfirm', type: 'password', placeholder: "Confirm your password"},
]

class Form extends Component {
  constructor(props){
    super(props)
    this.state = {} // Notice no explicit state is set in the constructor
  }

  handleChange = (e) => {
    const { name, value } = e.target;

    this.setState({
      [name]: value
    }
  }

  handleSubmit = (e) => {
    // do something
  }

  render() {
     <form onSubmit={(e) => handleSubmit(e)}>
       { inputs.length ?
         inputs.map(input => {
           const { name, placeholder, type } = input;
           const value = this.state[name] || ''; // Does it exist? If so use it, if not use an empty string

           return <input key={name}  type={type} name={name} placeholder={placeholder} value={value} onChange={this.handleChange}/>
       }) :
         null
       }
       <button type="submit" onClick={(e) => e.preventDefault }>Submit</button>
     </form>    
  }
}

Erstellen Sie einfach einen Fallback auf '', wenn der Name this.state.name null ist.

<input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>

Dies funktioniert auch mit den useState-Variablen.