Question

我正在尝试弄清楚如何使用this.props.dispatch(change)来使用一个字段选择器值来更新FieldArray中的另一个字段值。

我似乎无法获得正确的语法。

this.props.dispatch(
        change("FieldArraysForm", `${props.member}.firstName`, this.props.hasLastName)
      );

有什么想法？预期的行为是添加成员，然后在“名字”字段中以编程方式更新“姓氏”字段中输入的任何内容。

/**
The following can replace the file in the Field Arrays example
(https://github.com/erikras/redux-form/tree/master/examples/fieldArrays) to demonstrate this functionality.
**/
import React from "react";
import { connect } from "react-redux";
import {
  Field,
  FieldArray,
  reduxForm,
  formValueSelector,
  change
} from "redux-form";
import validate from "./validate";

const selector = formValueSelector("fieldArrays");

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>
);

class Member extends React.Component {
  componentDidUpdate(prevProps, props) {
    if (this.props.hasLastName !== prevProps.hasLastName) {
      this.props.dispatch(
        change("FieldArraysForm", `${props.member}.firstName`, this.props.hasLastName)
      );
    }
  }

  render() {
    const { member, index, fields, hasLastName } = this.props;
    return (
      <li key={index}>
        <button
          type="button"
          title="Remove Member"
          onClick={() => fields.remove(index)}
        />
        <h4>Member #{index + 1}</h4>
        <Field
          name={`${member}.firstName`}
          type="text"
          component={renderField}
          label="First Name"
        />
        <Field
          name={`${member}.lastName`}
          type="text"
          component={renderField}
          label="Last Name"
        />
        {hasLastName && <p>{hasLastName}</p>}
      </li>
    );
  }
}
Member = connect((state, props) => ({
  hasLastName: selector(state, `${props.member}.lastName`)
}))(Member);

const renderMembers = ({ fields, meta: { touched, error } }) => (
  <ul>
    <li>
      <button type="button" onClick={() => fields.push({})}>
        Add Member
      </button>
      {touched && error && <span>{error}</span>}
    </li>
    {fields.map((member, index) => (
      <Member member={member} fields={fields} index={index} key={index} />
    ))}
  </ul>
);

const FieldArraysForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="clubName"
        type="text"
        component={renderField}
        label="Club Name"
      />
      <FieldArray name="members" component={renderMembers} />
      <div>
        <button type="submit" disabled={submitting}>
          Submit
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: "fieldArrays", // a unique identifier for this form
  validate
})(FieldArraysForm);

Answer 1

要动态访问FieldArray，您可能需要更改此内容：

change("FieldArraysForm", `${props.member}.firstName`, this.props.hasLastName)

到此：

change("FieldArraysForm", `members[${this.props.index}].firstName`, this.props.hasLastName)

另外，传递指定的selector形式：

const selector = formValueSelector("fieldArrays");

这会给你：

change("fieldArrays", `members[${this.props.index}].firstName`, this.props.hasLastName)

必须得到一些帮助 - 感谢@Amanda Field。

Answer 2

您需要在要更改的FieldArray中指定字段的索引。为此，请使用<fieldName>.<index>.<propertyName>，例如：

this.props.change('members.0.firstName', 'Donald')

其中成员是FieldArray字段的名称， 0 是要更改的数组中项目的索引， firstName 是对象的属性。请参阅沙箱here

以编程方式更改Redux-Form中的FieldArray值

2 个答案: