Question

在我的react组件中，我试图设置一个名为“ total”的字段。我已将change操作作为道具导入到我的组件中：

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生命周期事件适合？我想在任何字段上进行表单更改时都触发此操作。

Answer 1

您需要将语句从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，取消选择单选按钮会重置{ {1}}字段到email）

如何以redux形式更改字段？

1 个答案: