Question

每次单击按钮时，我都会使用此代码推送新的FieldArray，但它仅适用于renderContract FieldArray组件。

const renderContact = ({ fields, meta: { error } }) => (
    <div>
    {fields.map((contact, index) => (
      <div key={index}>
        <div className="row form-pad">
          <div className="col-md-3">
            <span>Country Code {index + 1}:<span className="requiredField text-danger"> * </span>: </span>
          </div>
          <div className="col-md-7">
            <Field name={`${contact}.landlineCountryCode`}  component={renderField}type="text"/>
          </div>
        </div>
      </div>
    ))}
    <button className="btn btn-primary"  onClick={() => fields.push({})}>
      Add Contact
    </button>
  </div>
)

并在父窗体组件上呈现它：

<FieldArray name="contact" component={renderContact} />

如何在fieldArray之外使用fields.push({})？

修改

我尝试了这个但无济于事：

<button type="button" onClick={() => props.dispatch(arrayPush('PersonalInfoForm', 'contact', [{}]))}> Add Contact</button>

Answer 1

您可以使用arrayPush和form发送操作fieldname，以便从FieldArray外部生成fields.push({})

import { arrayPush } from 'redux-form';

// ...
dispatch(arrayPush('myForm', 'contact', {}));

如何从外部渲染函数推送新的FieldArray？

1 个答案: