Immer redux-form Werte in onChange-Ereignis

Was ist der richtige Weg, um die Werte aus einem Formular verwaltet redux-form nach jeder form update??? Ich muss zum Versand eine Aktion jedes mal, wenn Sie die form ändern, verwenden Sie die Werte in das Formular eingegeben.

Meine aktuelle Lösung bekommt den alten Werten fest, anstatt die diejenigen, die wurden gerade aktualisiert.

  onFormChange(e) {
    const { fieldValue1, fieldValue2, fieldValue3 } = this.props.fields;
    console.log(fieldValue1.value, fieldValue2.value, fieldValue3.value);
  }
  render() {
    return (
      <form onChange={this.onFormChange}>
        //inputs here
      </form>
    );
  }

Meine andere Lösung ist, aber ich weiß nicht, wie zuverlässig es ist:

  onFormChange(e) {
    console.log(e);
    setTimeout(() => {
      const { fieldValue1, fieldValue2, fieldValue3 } = this.props.fields;
      console.log(fieldValue1.value, fieldValue2.value, fieldValue3.value);
    }, 0);
  }
InformationsquelleAutor ItsGreg | 2016-08-03
  1. 5

    Mit redux-form 6, Sie können die Werte mit Hilfe der formValueSelector:

    import { formValueSelector } from 'redux-form';

const selector = formValueSelector('myFormName');

connect(
  state => ({
      values: selector(state, 'fieldValue1', 'fieldValue2', 'fieldValue3');
  })
)(MyFormComponent);

    Jetzt können Sie vergleichen die aktuellen Werte, und die vorherigen Werte in componentWillReceiveProps:

    componentWillReceiveProps(nextProps) {
    const nextValues = nextProps.values; 
    const values = this.props.values;
    //if at least one of the form values changed
    if(Object.keys(nextValues).some((key) => nextValues[key] !== values[key])) {
        console.log(nextProps.values); //do something with values
    }
}

    Verwendung von redux-form bis version 6, haben Sie nicht verwenden die formValueSelector als redux-Formular hinzufügen, die values prop automatisch Ihre eingerichtete Formular.

    • Dies führt zu einer Endlosschleife, da bin ich Entsendung eine andere Aktion.
    • Das ist, warum Sie sollten prüfen, ob die Werte tatsächlich geändert, und nur die Tat, wenn Sie Versand eine Aktion. Es sei denn, Sie ändern, sagte die Werte in der ausgeführten Aktion, und dann haben Sie eine Endlosschleife.
    • Die values Requisiten, die nicht mehr existiert.
    • von mir dafür, dass. Eine Sache, obwohl, Sie vergaß hinzuzufügen, die select Funktion, die Sie definieren müssen. Es würde in etwa so Aussehen: const selector = formValueSelector('myFormName')
    • Für wen es betreffen kann, ich möchte darauf hinweisen, dass es eine getFormValues Selektor in der version 6+, wird, im Grunde, macht Sie alle Formular-Feld-Werte in eine requisite als this.props.values verwendet, geben Sie Sie in Versionen vor 6.
    • Es gibt kleine Fehler, Links. Bitte ändern Sie if(Object.keys(nextValue) zu if(Object.keys(nextValues)

    InformationsquelleAutor Ori Drori
Schreibe einen Kommentar