Pytanie Wprowadź dane wejściowe, nie używając aktualizacji formularza Redux


Moje pole wejściowe nie jest aktualizowane po naciśnięciu klawisza:

import React, { Component, PropTypes } from 'react';

import { Field, reduxForm } from 'redux-form';

class CitySelector extends Component {
  render() {
    const { isFetching, pristine, submitting, handleSubmit } = this.props;

    return (
      <form className="form-horizontal col-xs-offset-1" onSubmit={handleSubmit(this.fetchWeather)}>
        <div className="form-group">
          <div className="col-md-4 col-xs-4">
            <Field name="city"
                   component={city =>
                     <input type="text" className="form-control" {...city.input} placeholder="enter a city for a 5 day forecast"/>
                   }
            />
          </div>
          <div className="col-md-3 col-xs-3">
            <button type="submit" className="btn btn-success">Submit</button>
          </div>
        </div>
      </form>
    );
  }
}

export default reduxForm({
  form: 'cityForm'
})(CitySelector);

Czy muszę dostarczyć onChange obsługa wprowadzania tekstu?


12
2017-10-06 20:14


pochodzenie




Odpowiedzi:


Miałem ten sam problem i mój błąd był bardzo prosty.

Oto co miałem:

import { combineReducers } from 'redux';
import { reducer as forms } from 'redux-form';

import otherReducer from './otherReducer';

export default combineReducers({ otherReducer, forms });

Zauważ, że importowałem reduktor w postaci redux jako forms i przekazanie go tak, jak jest to do moich syndykatów (tak jak zrobiłem otherReducer) za pomocą skrótu wartości właściwości ES6 obiektu.

Problem polega na tym, że klawisz używany do przekazania reduktor w postaci redux do naszego CombineReducers MUSI być nazwanym Formularz, więc musimy to zmienić na:

export default combineReducers({ customer, form: forms });

lub

import { reducer as form } from 'redux-form';
export default combineReducers({ otherReducer, form });

Mam nadzieję, że to pomoże komuś innemu ...


50
2017-12-02 00:52



ładnie złapać klucz - rambossa
Dokumenty muszą mieć te informacje. Wykonanie przewodnika "Rozpocznij" prowadzi wprost do pułapki. To jest poprawka. - coblr
dobra robota! Byłem szalony -_- - pietro909
to działa również dla mnie. dzięki - Daniel Artola


Jeśli korzystasz z niezmiennych struktur danych, zamiast:

import { reduxForm } from 'redux-form';

Użyj tego:

import { reduxForm } from 'redux-form/immutable';

Zobacz tutaj, aby uzyskać więcej informacji http://redux-form.com/6.7.0/examples/immutable/


18
2018-01-25 05:55



Dzięki, zmarnowałem kilka godzin zastanawiając się, dlaczego moje dane wejściowe nie zostały zaktualizowane! - Mark Steggles
dzięki, właśnie to się ze mną działo. jeśli zdarzy ci się użyć react-boilerplate, masz ten problem. - burcakulug


Jeśli podasz niestandardowy komponent wejściowy do Field, więc tak, musisz zadzwonić onChange przekazany w ramach input prop do twojego komponentu. Prawdę mówiąc, prawie udało ci się to osiągnąć dzięki rozprzestrzenianiu się city.input, ale jest haczyk.

Kiedy definiujesz element bezstanowy (lub po prostu dowolną funkcję) wewnątrz  render() metoda jest odtwarzana przy każdym renderowaniu. A ponieważ ten bezpaństwowy komponent jest przekazywany jako rekwizyt (component) do Field, to zmusza Field renderować po każdym wypoczynku. Tak więc twój sygnał wejściowy straci ostrość za każdym razem CitySelector renderowanie komponentów, dzięki czemu nie zostaną przechwycone żadne naciśnięcia przycisków.

Powinieneś wyodrębnić swój bezpaństwowy komponent do osobnej definicji:

const myInput = ({ input }) => (
  <input type="text" className="form-control" {...input} placeholder="enter a city for a 5 day forecast" />
);

class CitySelector extends Component {
  render() {
    const { isFetching, pristine, submitting, handleSubmit } = this.props;

    return (
      <form className="form-horizontal col-xs-offset-1" onSubmit={handleSubmit(this.fetchWeather)}>
        <div className="form-group">
          <div className="col-md-4 col-xs-4">
            <Field name="city" component={myInput} />
          </div>
          <div className="col-md-3 col-xs-3">
            <button type="submit" className="btn btn-success">Submit</button>
          </div>
        </div>
      </form>
    );
  }
}

Dzięki temu Twój kod jest bardziej czytelny.

Możesz znaleźć więcej informacji na temat tego problemu w oficjalni doktorzy Formy Redux. Zauważ, że prawdopodobnie możesz użyć wartości domyślnej input bez tworzenia własnego, spójrz na prosty przykład formularza.


1
2017-10-06 23:40



Nadal nie działa po refaktoryzacji - dagda1
Czy mój reduktor musi zaktualizować właściwość o nazwie miasto? - dagda1
No cóż, nie, Redux Form zarządza samodzielnie aktualizacjami stanu. Naprawdę nie mogę znaleźć źródła Twojego problemu tutaj. Czy widzisz jakieś błędy w konsoli? - Konstantin Grushetsky
Brak błędów w konsoli i widzę, jak ta akcja jest rejestrowana: akcja Object {type: "redux-form / CHANGE", meta: Object, payload: "a"} - dagda1
Nie pomyślałbym, że muszę obsługiwać formę redux / CHANGE - dagda1


Właśnie miałem problem podobny do tego pytania, ale mój formularz nie był wysyłany, a funkcja sprawdzania poprawności również nie była uruchamiana.

Wynikało to z tego:

Zmieniłem to z input do czegoś innego i całkowicie zepsuł formułę redux - CICHO

const TextInput = ({
    input,                                                 <--- DO NOT CHANGE THIS
    placeholder,
    type,
    meta: { touched, error, warning }
  }) => {
    return (
      <div className="row-md">
          <input
            placeholder={placeholder}
            type={type}
            className="form-text-input primary-border"
            {...input}                                     <--- OR THIS
          />
          {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
      </div>
    )
}

Oto pozostała część mojego wpisu, jeśli ktoś chce się go uczyć:

<Field
  component={TextInput}
  type="tel"
  name="person_tel"
  placeholder="Mobile Phone Number"
  value={this.props.person_tel}
  onChange={(value) => this.props.updateField({ prop: 'person_tel', value })}
/>

0
2017-11-02 07:31