React - zmiana niekontrolowanego wejścia

Mam prosty element reagujący z formularzem, który moim zdaniem ma jedno kontrolowane wejście:

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;

Po uruchomieniu aplikacji pojawia się następujące ostrzeżenie:

Ostrzeżenie: MyForm zmienia niekontrolowane wprowadzanie tekstu kontrolowanego. Elementy wejściowe nie powinny przełączać się z niekontrolowanego na kontrolowane (lub odwrotnie). Wybierz między użyciem kontrolowanego lub niekontrolowanego elementu wejściowego przez cały okres użytkowania komponentu

Uważam, że mój wkład jest kontrolowany, ponieważ ma wartość. Zastanawiam się, co robię źle?

Używam React 15.1.0

Uważam, że mój wkład jest kontrolowany, ponieważ ma wartość.

Aby wejście podlegało kontroli, jego wartość musi odpowiadać wartości zmiennej stanu.

Ten warunek nie jest początkowo spełniony w twoim przykładzie, ponieważ this.state.namenie jest początkowo ustawiony. Dlatego dane wejściowe są początkowo niekontrolowane. Gdy program onChangeobsługi zostanie uruchomiony po raz pierwszy, this.state.namezostanie ustawiony. W tym momencie powyższy warunek jest spełniony, a wejście uważa się za kontrolowane. To przejście z niekontrolowanego do kontrolowanego powoduje błąd przedstawiony powyżej.

Inicjując this.state.namew konstruktorze:

na przykład

this.state = { name: '' };

dane wejściowe będą kontrolowane od samego początku, co rozwiąże problem. Zobacz React Controlled Components, aby uzyskać więcej przykładów.

Nie związany z tym błędem, powinieneś mieć tylko jeden domyślny eksport. Twój kod powyżej ma dwa.

Kiedy renderujesz swój komponent po raz pierwszy, this.state.namenie jest on ustawiony, więc ocenia on na undefinedlub null, i kończysz przekazywanie value={undefined}lub value={null}na twój input.

Kiedy ReactDOM sprawdza, czy pole jest kontrolowane, sprawdza, czyvalue != null (pamiętaj, że to !=nie jest !==), a ponieważ undefined == nullw JavaScript decyduje, że jest niekontrolowane.

Kiedy onFieldChange()jest wywoływany, this.state.namejest ustawiany na wartość ciągu, dane wejściowe przechodzą od niekontrolowanego do kontrolowanego.

Jeśli zrobisz to this.state = {name: ''}w swoim konstruktorze, ponieważ '' != nulltwoje dane wejściowe będą miały wartość przez cały czas, a ten komunikat zniknie.

Innym podejściem może być ustawienie wartości domyślnej w danych wejściowych, na przykład:

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

Wiem, że inni już na to odpowiedzieli. Ale bardzo ważny czynnik, który może pomóc innym osobom, które mają podobny problem:

Musisz mieć onChangemoduł obsługi dodany w polu wejściowym (np. Pole tekstowe, pole wyboru, radio itp.). Zawsze obsługuj aktywność przez onChangemoduł obsługi.

Przykład:

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

Podczas pracy z polem wyboru może być konieczne obsługiwanie jego checkedstanu za pomocą !!.

Przykład:

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

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

Prostym rozwiązaniem tego problemu jest ustawienie domyślnie pustej wartości:

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

Jednym potencjalnym minusem przy ustawianiu wartości pola na „” (pusty ciąg) w konstruktorze jest to, że pole jest polem opcjonalnym i nie jest edytowane. O ile nie wykonasz masowania przed opublikowaniem formularza, pole zostanie utrwalone do przechowywania danych jako pusty ciąg zamiast NULL.

Ta alternatywa pozwoli uniknąć pustych ciągów:

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

... 

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

Kiedy używasz onChange={this.onFieldChange('name').bind(this)}w swoich danych wejściowych, musisz zadeklarować swój pusty ciąg znaków jako wartość pola właściwości.

niewłaściwy sposób:

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

właściwa droga:

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

W moim przypadku brakowało mi czegoś naprawdę trywialnego.

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

Mój stan był następujący, gdy otrzymywałem ostrzeżenie:

state = {
   myObject: undefined
}

Poprzez naprzemienne zmienianie mojego stanu w celu odniesienia danych wejściowych mojej wartości , mój problem został rozwiązany:

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

Jeśli rekwizyty w komponencie zostały przekazane jako stan, ustaw wartość domyślną dla tagów wejściowych

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

Ustaw wartość właściwości „name” w stanie początkowym.

this.state={ name:''};

Aktualizacja do tego. Do użycia haków Reactconst [name, setName] = useState(" ")

Zasadniczo dzieje się tak tylko wtedy, gdy nie kontrolujesz wartości pola przy uruchomieniu aplikacji i po uruchomieniu jakiegoś zdarzenia lub funkcji lub zmianie stanu, próbujesz teraz kontrolować wartość w polu wejściowym.

To przejście z braku kontroli nad danymi wejściowymi, a następnie nad nimi kontroli, powoduje, że problem występuje przede wszystkim.

Najlepszym sposobem na uniknięcie tego jest zadeklarowanie wartości dla danych wejściowych w konstruktorze komponentu. Tak, aby element wejściowy miał wartość od początku aplikacji.

Aby dynamicznie ustawiać właściwości stanu dla danych wejściowych formularza i kontrolować je, możesz zrobić coś takiego:

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

Po prostu utwórz rezerwę na „”, jeśli this.state.name ma wartość NULL.

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

Działa to również ze zmiennymi useState.