Как изменить поле в редукс-форме? - PullRequest
Новая
       6

Как изменить поле в редукс-форме?

0 голосов
/ 31 марта 2019

В моем компоненте реакции я пытаюсь установить поле под названием «общее». Я импортировал действие изменения как опору в свой компонент: 

import React, { Component, Fragment } from 'react'
import { Field, FieldArray, reduxForm, getFormValues, change } from 'redux-form'
import { connect } from 'react-redux'
import { CalcTotal } from './calculationHelper';



const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} type={type} placeholder={label} />
      {touched && error && <span>{error}</span>}
    </div>
  </div>
)

const renderMods = ({ fields, meta: { error, submitFailed } }) => (
  <Fragment>
    <ul>
      <li>
        <button type="button" onClick={() => fields.push({})}>
          Add Modification
      </button>
        {submitFailed && error && <span>{error}</span>}
      </li>
      {fields.map((mod, index) => (
        <li key={index}>
          <button
            type="button"
            title="Remove Mod"
            onClick={() => fields.remove(index)}
          />
          <h4>Mod #{index + 1}</h4>
          <Field
            name={`${mod}.lastYear`}
            type="number"
            component={renderField}
            label="Last Year"
          />
          <Field
            name={`${mod}.currentYear`}
            type="number"
            component={renderField}
            label="Current Year"
          />



          <Field name={`${mod}.type`} component="select" label="Type">
            <option />
            <option value="-">Expense</option>
            <option value="+">Income</option>
            <option value="-">Tax</option>
          </Field>


        </li>
      ))}
    </ul>

    <Field
      name="total"
      type="number"
      component="input"
      label="Total modifications"
      text="0"
    />

  </Fragment>
)


class FieldArraysForm extends Component {



  render() {
    const { handleSubmit, formValues, change } = this.props



    if (formValues) {
      console.log('formvalues', formValues);
      const test = CalcTotal(2000);
      console.log('calc=', test);
      debugger
      this.props.change('fieldArraysForm', 'total', 5000)
    }

    return (
      <form onSubmit={handleSubmit}>

        {/* <button onClick={this.changeStuff}>set total</button> */}

        <FieldArray name="mods" component={renderMods} />




        <div>
          <button type="submit" >
            Submit
        </button>

        </div>
      </form>
    )
  }
}



const mapStateToProps = (state) => ({
  formValues: getFormValues('fieldArraysForm')(state),
});

const mapDispatchToProps = {
  change
};


// const Example = reduxForm({
//   form: 'fieldArraysForm', // a unique identifier for this form
// })(FieldArraysForm)

// const ConnectedForm = connect(
//   mapStateToProps,
//   mapDispatchToProps,
// )(Example);

// export default ConnectedForm

export default reduxForm({
  form: "fieldArraysForm"
})(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(FieldArraysForm)
);

Строка, в которой код попадает в бесконечный цикл: 

this.props.change('fieldArraysForm', 'total', 5000)

Как / где я могу поместить это утверждение, чтобы убедиться, что поле 'total' изменено и не входит в цикл? Какое событие жизненного цикла React подойдет? Я хочу использовать это всякий раз, когда в любом поле изменяется форма.

1 Ответ

2 голосов
/ 31 марта 2019

Вам необходимо переместить ваше утверждение из метода render в метод жизненного цикла componentDidUpdate (вам также необходимо нужно выражение if для предотвращения бесконечного цикла): 

componentDidUpdate(prevProps) {
    if (this.props.someValue !== prevProps.someValue) {
      this.props.change("formName", "formField", "newFormValue");
    }
  }

Рабочий пример : https://codesandbox.io/s/r5zz36lqnn (при выборе переключателя Has Email? поле email заполняется test@example.com, при отмене выбора переключателя сбрасывается emailполе до "")

...