How to use FieldArray with a component which can have other functions

问题

I am using redux-form with a FieldArray.I am having lot of drop downs in FieldArray component and on change of selection I need to trigger some methods to handle changes. So I need to use component which can have other methods also (not the functional component).

As of now my code is as below, using functional component but I need to define customMethod method also.

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

Please let me know how can I use other/custom methods in FieldArray component. Thank you.

回答1:

It doesn't really matter what type of component is, either class or, functional. It completely depends on the implementation. Take a look at this code sandbox 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);

来源：https://stackoverflow.com/questions/63113844/how-to-use-fieldarray-with-a-component-which-can-have-other-functions