reactjs - 以编程方式更改 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。