React: modifica di un input non controllato

Ho un semplice componente di reazione con il modulo che credo abbia un input controllato:

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;

Quando eseguo la mia applicazione ricevo il seguente avviso:

Avvertenza: MyForm sta modificando un input non controllato di tipo testo da controllare. Gli elementi di input non devono passare da incontrollati a controllati (o viceversa). Decidi se utilizzare un elemento di input controllato o non controllato per la durata del componente

Credo che il mio input sia controllato poiché ha un valore. Mi chiedo cosa sto facendo di sbagliato?

Sto usando React 15.1.0

Credo che il mio input sia controllato poiché ha un valore.

Perché un input sia controllato, il suo valore deve corrispondere a quello di una variabile di stato.

Tale condizione inizialmente non è soddisfatta nel tuo esempio perché this.state.nameinizialmente non è impostata. Pertanto, l'input inizialmente non è controllato. Una volta che il onChangegestore viene attivato per la prima volta,this.state.name viene impostato. A quel punto, la condizione di cui sopra è soddisfatta e l'ingresso è considerato controllato. Questa transizione da incontrollata a controllata produce l'errore visto sopra.

Inizializzando this.state.name nel costruttore:

per esempio

this.state = { name: '' };

l'ingresso sarà controllato dall'inizio, risolvendo il problema. Vedi componenti controllati React per ulteriori esempi.

Non correlato a questo errore, è necessario disporre di una sola esportazione predefinita. Il codice sopra ha due.

Quando esegui il rendering del componente per la prima volta, this.state.namenon è impostato, quindi viene valutato undefinedo null, e finisci per passare value={undefined}o value={null}al tuo input.

Quando ReactDOM verifica se un campo è controllato, controlla sevalue != null (nota che non lo !=è !==) e, poiché undefined == nullin JavaScript, decide che non è controllato.

Quindi, quando onFieldChange()viene chiamato, this.state.nameè impostato su un valore stringa, l'input passa dall'essere incontrollato al controllo.

Se lo fai this.state = {name: ''}nel tuo costruttore, perché '' != null, il tuo input avrà un valore per tutto il tempo e quel messaggio sparirà.

Un altro approccio potrebbe essere l'impostazione del valore predefinito all'interno dell'input, in questo modo:

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

So che altri hanno già risposto. Ma un fattore molto importante qui che può aiutare altre persone con problemi simili:

Devi avere un onChangegestore aggiunto nel tuo campo di input (es. TextField, checkbox, radio, ecc.). Gestire sempre l'attività tramite il onChangegestore.

Esempio:

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

Quando si lavora con la casella di controllo , potrebbe essere necessario gestirne lo checkedstato con !!.

Esempio:

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

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

La soluzione semplice per risolvere questo problema consiste nell'impostare un valore vuoto per impostazione predefinita:

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

Un potenziale svantaggio con l'impostazione del valore del campo su "" (stringa vuota) nel costruttore è se il campo è un campo opzionale e non viene modificato. A meno che non si esegua un massaggio prima di pubblicare il modulo, il campo verrà mantenuto nell'archivio dati come una stringa vuota anziché NULL.

Questa alternativa eviterà le stringhe vuote:

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

... 

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

Quando si utilizza onChange={this.onFieldChange('name').bind(this)}l'input, è necessario dichiarare la stringa vuota del proprio stato come valore del campo proprietà.

modo errato:

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

modo corretto:

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

Nel mio caso, mi mancava qualcosa di veramente banale.

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

Il mio stato era il seguente quando stavo ricevendo l'avvertimento:

state = {
   myObject: undefined
}

Alternando il mio stato per fare riferimento all'input del mio valore , il mio problema è stato risolto:

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

Se gli oggetti di scena sul componente sono stati passati come stato, inserisci un valore predefinito per i tag di input

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

Impostare un valore sulla proprietà 'name' nello stato iniziale.

this.state={ name:''};

Un aggiornamento per questo. Utilizzare per React Hooksconst [name, setName] = useState(" ")

Ciò si verifica generalmente solo quando non si controlla il valore del file all'avvio dell'applicazione e dopo un evento o una funzione attivata o lo stato modificato, si sta ora cercando di controllare il valore nel campo di input.

Questa transizione di non avere il controllo sull'input e quindi avere il controllo su di esso è ciò che causa il problema in primo luogo.

Il modo migliore per evitarlo è dichiarare un valore per l'input nel costruttore del componente. In modo che l'elemento di input abbia valore dall'inizio dell'applicazione.

Per impostare dinamicamente le proprietà dello stato per gli input dei moduli e mantenerli controllati, si potrebbe fare qualcosa del genere:

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>    
  }
}

È sufficiente creare un fallback su "" se this.state.name è null.

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

Questo funziona anche con le variabili useState.