Migrowanie formularzy redux do wersji v6, funkcje onBlur i onChange

Question

Przenoszę formularz redux do najnowszej wersji 6.0.0rc3. W tej wersji tablica "fields" zniknęła i została zastąpiona przez komponent Field (patrz http://redux-form.com/6.0.0-rc.3/docs/MigrationGuide.md/). Kiedyś rozszerzyć domyślną funkcję onblur w v5 tak:

const { user_zipcode } = this.props.fields; 
onChange={ 
    val => user_zipcode.onChange(this._handleZipcodeChange(val)) 
} 

Jednak w nowej wersji nie można zrobić więcej, ponieważ this.props.fields nie istnieje.

Z tego co znalazłem w docs, nowy sposób powinno być stworzenie komponentu dla każdego pola formularza, który ma odrębną funkcję i przedłużyć funkcję onblur tam:

_onBlur() { 
    // my custom blur-function 
} 

render() { 
    const { input, touched, error } = this.props; 
    return (
    <input 
     className={styles.input} 
     {...input} 
     onBlur={() => { 
     // 2 functions need to be called here 
     this._onBlur(); 
     input.onBlur(); 
     }} 
    /> 
); 
} 

To jest w porządku, z wyjątkiem że muszę utworzyć nowy element dla każdego pola, które musi zrobić coś innego, gdy nastąpi rozmycie. Na niektórych polach muszę nawiązać połączenie z API, które wykonuję, wysyłając akcję. Na przykład muszę to zrobić, aby uzyskać adres. W tych komponentach muszę podłączyć mój sklep, więc jest on wielokrotnie podłączony.

starałem się przekazać moje niestandardową funkcję od dominującej składowej pola, tak:

<Field 
    type="text" 
    name="user_zipcode" 
    component={Zipcode} 
    onBlurFunction={this._myBlurFunction} 
/> 

i coraz obie funkcje w moim składnika od rekwizytów:

... 
onBlur={() => { 
    input.onBlurFunction(); 
    input.onBlur(); 
}} 
... 

nie zrobił to” t działa poprawnie z powodu nowego React warning.

Czy jest lepszy sposób to zrobić?

Answer 1

Skończyło się na utworzeniu niestandardowego komponentu dla każdego pola formularza, które ma funkcję onChange lub onBlur. W ten sposób można uruchamiać obie funkcje, dlatego wywoływane są wszystkie domyślne działania formularzy redux.

// Licenceplate-component 

export default class Licenceplate extends Component { 

    _handleBlur = ({ currentTarget: { value } }) => { 
     // my blur function 
    } 

    render() { 
     const { 
      input, 
      meta: { touched, error } 
     } = this.props; 

     return (
      <div className={styles.wrapper}> 
      <input 
       {...input} 
       type="text" 
       onBlur={ 
       e => input.onBlur(this._handleBlur(e)) 
       } 
      /> 

     </div> 
     ); 
    } 
} 


// In my form-component 
<Field 
    component={Licenceplate} 
    name="car_licenceplate" 
    type="text" 
/> 

Answer 2

W Dokumentach mówi to

podpory: obiekt [opcjonalnie]

obiektu z niestandardowymi podpory przejdzie przez składnik pola na składnik przewidziany do podparcia elementów. Te rekwizyty zostaną połączone z rekwizytami dostarczonymi przez Pole. Może to być przydatne, jeśli używasz TypeScript. Ta konstrukcja jest całkowicie opcjonalna; Podstawowym sposobem przekazywania rekwizytów do twojego komponentu jest przekazanie ich bezpośrednio do komponentu Pola, ale jeśli z jakiegokolwiek powodu wolisz spakować je w oddzielny obiekt, możesz to zrobić, przekazując je do rekwizytów.

<Field component={renderField} props={{ disabled: true }} /> 

http://redux-form.com/6.0.0-rc.3/docs/api/Field.md/

Może spróbuj, że jeden. Prawdopodobnie zapobiegnie to błędowi. Albo wyciągnij swoją propozycję funkcji, zanim zostanie przekazana do wejścia.