如何从具有其他字段的 formik 形式的 React FieldArray 中获取值？

Question

我创建了一个 Formik 表单，它包含一个字段数组 form 并且fieldArray作为单独的组件位于两个单独的类中。

我的表格：

<Formik onSubmit = {(values, { setSubmitting }) => { setSubmitting(false);}}
        enableReinitialize>
    {({handleSubmit, errors})=> (
        <Form onSubmit= { handleSubmit }>
            <Form.Group as= { Row } controlId= "cpFormGroupTitle" className="required">
                <Form.Label className="post-create-label"  column sm={ 2 } >
                    Title
                </Form.Label>
                <Col sm={ 10 }>
                    <Field name="title" component={ renderTextField } type="text"
                           isinvalid={ !!errors.title ? "true": "false" }
                           placeholder="Title *" />
                </Col>
            </Form.Group>
            <Form.Group as= { Row } controlId= "cpFrmGroupShortDesc"  className="required">
                <Form.Label className="post-create-label"  column sm={ 2 } >
                    Short Description
                </Form.Label>
                <Col sm={ 10 }>
                    <Field name="short-desc" component={ renderTextArea } type="text"
                           isinvalid={ !!errors.shortDescription ? "true": "false" }
                           placeholder="Short Description *" />
                </Col>
            </Form.Group>
            <Form.Group as= { Row } controlId= "cpFormGroupFeatures">
                <Form.Label className="post-create-label"  column sm={ 2 }>
                    Features
                </Form.Label>
                <Col sm={ 10 }>
                    <TextFieldArray initialValues={{ features: [] } } name="features"/>
                </Col>
            </Form.Group>
            <Form.Group as={ Row }>
                <Col sm= { { span: 2, offset:2 } }>
                    <Button type="submit"  variant="primary">Submit</Button>
                </Col>
                <Col sm={ 2 }>
                    <Button variant="secondary">Save as draft</Button>
                </Col>
            </Form.Group>
        </Form>
    )}
</Formik>

这里<TextFieldArray>是字段数组，提交表单时我需要从字段数组中获取值。

文本字段数组：

export const TextFieldArray = (props) => (
    <React.Fragment>
        <Formik initialValues= { props.initialValues } render={({ values }) => (
            <Form>
                <FieldArray name= { props.name } render={arrayHelper => (
                    <div>
                        { values[props.name] && values[props.name].length > 0 ?
                            (
                                values[props.name].map((item, index) => (
                                    <div key={index}>
                                        <Form.Group as= { Row }>
                                            <div className="col-md-8">
                                                <Field name={`${props.name}.${index}`}
                                                       className="form-control"/>
                                            </div>
                                            <div className="col-md-2">
                                                <Button type="button" variant="outline-secondary"
                                                        onClick={() => arrayHelper.remove(index)}>
                                                    Remove
                                                </Button>
                                            </div>
                                            <div className="col-md-2">
                                                <Button type="button" variant="outline-secondary"
                                                    onClick={() => arrayHelper.insert(index, '')}>
                                                    Add
                                                </Button>
                                            </div>
                                        </Form.Group>
                                    </div>
                                ))
                            ) : (
                                <Button type="button" variant="outline-secondary"
                                        onClick={() => arrayHelper.push('')} >
                                   {`Add ${ props.name }`}
                                </Button>
                            )
                        }
                    </div>
                )} />
            </Form>
        )} />
    </React.Fragment>
);

我是 ReactJS 的初学者，所以请有人帮助我，这将是你们所有人的巨大帮助。谢谢。

Answer 1

我认为您不需要为子组件创建第二种形式。
您只需将值从父级传递到 TextFieldArray

    <TextFieldArray values={values.myArr} name="features"/>     

子组件只是接收值并渲染它们（就像在父组件中一样）

export const TextFieldArray = (props) => {
return (
    <React.Fragment>
                    <FieldArray
                        name= { props.name }
                        render={arrayHelper => (
                            <div>
                                {
                                    props.values[props.name] && props.values[props.name].length > 0 ?
                                        (
                                            props.values[props.name].map((item, index) => (
                                                <div key={index}>
                                                    <Form.Group as= { Row }>
                                                        <div className="col-md-8">
                                                            <Field name={`${props.name}.${index}`} className="form-control"/>
                                                        </div>
                                                        <div className="col-md-2">
                                                            <Button type="button" variant="outline-secondary"
                                                                onClick={() => arrayHelper.remove(index)}>
                                                                Remove
                                                            </Button>                                                              
                                                        </div>
                                                        <div className="col-md-2">
                                                            <Button type="button" variant="outline-secondary"
                                                                onClick={() => arrayHelper.insert(index, '')}
                                                            >
                                                                Add
                                                            </Button> 
                                                        </div>
                                                    </Form.Group>
                                                </div>
                                            ))
                                        ) : (
                                            <Button type="button" variant="outline-secondary" onClick={() => arrayHelper.push('')} >
                                               {`Add ${ props.name }`}
                                            </Button>
                                        )
                                }
                            </div>
                        )}
                    />
    </React.Fragment>
)

当然不要忘记将数组的初始值添加到父组件中。

最后，当您单击提交按钮时，它会给您值。