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

Question

我正在尝试弄清楚如何使用

this.props.dispatch(change)

以便使用一个字段选择器值来更新 FieldArray 中的另一个字段值。

https://codesandbox.io/s/2p7k7jn930

我似乎无法正确理解语法。

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

其中 member 是

FieldArray

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

Answer 3

可以使用splice进行更新：

fields.splice(index, 1, { ...fields.get(index), firstName: hasLastName })

1

表示更换项目。