如何将 FieldArray 与可以具有其他功能的组件一起使用

Question

我正在使用redux-form 和FieldArray。我在FieldArray 组件中有很多下拉菜单，并且在更改选择时我需要触发一些方法来处理更改。所以我需要使用可以有其他方法的组件（不是功能组件）。

到目前为止，我的代码如下，使用功能组件，但我还需要定义 customMethod 方法。

<FieldArray name="docList" component={docs} props={this.props}/>

const docs= ({...props, meta: {error, submitFailed}}) => {
    const {fields} = props;
    return (
    {fields.map((doc, index) => (
     <div>
            <Field component={CustomCom} name={`${doc}.size`} label="size"
                handleChange={(label, type) => this.customMethod(label, SIZE)}
                placeholder="" value={props.sizeValue}/>
     </div>
))}

请告诉我如何在 FieldArray 组件中使用其他/自定义方法。谢谢。

Answer 1

什么类型的组件并不重要，无论是类还是功能。这完全取决于实现。看看这个代码沙箱https://codesandbox.io/s/redux-form-field-arrays-example-wc9u6?file=/FieldArraysForm.js

import React from "react";
import { Field, FieldArray, reduxForm } from "redux-form";
import validate from "./validate";

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 renderMembers = ({ fields, meta: { touched, error, submitFailed } }) => {
  const handleInputChange = input => event => {
    console.log("input From functional component", input);
  };
  return (
    <ul>
      <li>
        <button type="button" onClick={() => fields.push({})}>
          Add Member
        </button>
        {(touched || submitFailed) && error && <span>{error}</span>}
      </li>
      {fields.map((member, index) => (
        <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"
            onChange={handleInputChange("firstName")}
          />
          <Field
            name={`${member}.lastName`}
            type="text"
            component={renderField}
            label="Last Name"
            onChange={handleInputChange("lastName")}
          />
        </li>
      ))}
    </ul>
  );
};

class RenderMembersUsingClass extends React.Component {
  handleInputChange = input => () => {
    console.log("input From class component", input);
  };

  render() {
    const {
      fields,
      meta: { touched, error, submitFailed }
    } = this.props;

    return (
      <ul>
        <li>
          <button type="button" onClick={() => fields.push({})}>
            Add Member
          </button>
          {(touched || submitFailed) && error && <span>{error}</span>}
        </li>
        {fields.map((member, index) => (
          <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"
              onChange={this.handleInputChange("firstName")}
            />
            <Field
              name={`${member}.lastName`}
              type="text"
              component={renderField}
              label="Last Name"
              onChange={this.handleInputChange("lastName")}
            />
          </li>
        ))}
      </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} />
      <FieldArray name="members" component={RenderMembersUsingClass} />
      <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);