Redux-Form：FieldArray中的更改提交父表单

Question

我坚持使用redux-form的问题。我有一个表格，其中填充了initialValues。在顶级表单中，我有一个FieldArray，它会显示一个输入字段列表。每个输入字段都有用于删除它的按钮（通过fields.remove(index)）或在其后面插入另一个输入（通过fields.insert(index+1)）。我的问题是：当我调用fields.insert()时，新字段会被插入并正确注册，但父表单会被提交，但不应该提交。当数据数组至少有一个项目时，fields.push()上也会发生相同的情况。但它没有例如fields.remove()或fields.removeAll()。我无法弄清楚提交材料发生的原因/地点。我花了几个小时挖掘资源并玩弄官方的FieldArray示例。我无法在网上找到问题所以我想我在某个地方有一个错误，因为这与使用的redux-form版本无关（试过＆gt; = 6）。

感谢您的帮助，请参阅此处的代码。

父表单

import React from 'react';
import { Field, FieldArray, reduxForm } from 'redux-form';

import Row from 'muicss/lib/react/row';
import Col from 'muicss/lib/react/col';
import Button from 'muicss/lib/react/button';
import MaterialInput from '../material/material-input';
import MaterialSelect from '../material/material-select';
import MaterialFieldArray from '../material/material-fieldarray';

import Cover from './cover';
import CheckboxGroup from './checkbox-group';

const MovieDetailsEditForm = props => {

    const { handleSubmit, initialValues: { cover: { large: cover }, directors = [], actors = [] } } = props;

    const getFSKOptions = () => {
        return [
            {value: 0, label: 0},
            {value: 6, label: 6},
            {value: 12, label: 12},
            {value: 16, label: 16},
            {value: 18, label: 18}
        ];
    };

    const getFormats = () => {
        return [{value: 'DVD', label: 'DVD'}, {value: 'Blu-ray', label: 'Blu-Ray'}];
    }

    const getImages = () => props.initialValues.images.map( (image) => ({ value: image.large, checked: false }) );

    return (
        <Row>
            <form className="mui-form" onSubmit={handleSubmit(props.handleFormSubmit)}>
                <Col xs="12">
                    <Button type="submit" color="primary">Speichern</Button>
                </Col>
                <Col xs="12">
                    <Row>
                        <Col xs="12" md="6">
                            <Row>
                                <Col xs="12">
                                    <Field name="title" id="title" component={MaterialInput} label="Filmtitel" type="text" />
                                </Col>
                                <Col xs="6">
                                    <Field name="duration" id="duration" component={MaterialInput} label={props.initialValues.unit} type="text" />
                                </Col>
                                <Col xs="6">
                                    <Field
                                        name="format"
                                        id="format"
                                        options={getFormats()}
                                        component={MaterialSelect}
                                        label="Format"
                                        parse={(value, name) => value ? value : null}
                                    />
                                </Col>
                                <Col xs="12">
                                    <Field
                                        name="fsk"
                                        id="fsk"
                                        options={getFSKOptions()}
                                        component={MaterialSelect}
                                        label="FSK Einstufung"
                                        labelText="Freigegeben ab <<PLACEHOLDER>> Jahren"
                                        parse={(value, name) => value ? value : null}
                                    />
                                </Col>
                                { directors &&
                                    <Col xs="12">
                                        <h3>Regisseur{directors.length > 1 ? 'e' : ''}</h3>
                                        <FieldArray component={MaterialFieldArray} name="directors" />
                                    </Col>
                                }
                                { actors &&
                                    <Col xs="12">
                                        <h3>Cast</h3>
                                        <FieldArray component={MaterialFieldArray} name="actors" />
                                    </Col>
                                }
                            </Row>
                        </Col>
                        <Col xs="12" md="6" className="cover">
                            <Field {...props} name="cover" id="cover" component={Cover} />
                        </Col>
                    </Row>
                </Col>
                <Col xs="12">
                    <Field {...props} name="images" component={CheckboxGroup} valueProperty="large" />
                </Col>
            </form>
        </Row>
    );

}

export default reduxForm({
    form: 'MovieDetails',
    enableReinitialize: true
})(MovieDetailsEditForm);

材料fieldarray.js

import React from 'react';
import { Field } from 'redux-form';

import Row from 'muicss/lib/react/row';
import Col from 'muicss/lib/react/col';
import Button from 'muicss/lib/react/button';

import MaterialInput from '../material/material-input';

export default props => {
    const { fields } = props;

    const addEntry = index => fields.insert(index + 1, '');
    const removeEntry = index => fields.remove(index);

    const renderEntries = () => {
        return fields.map((field, index) => {
            return (<li key={index}>
                <Col xs="7" sm="8" md="7" lg="8">
                    <Field component={MaterialInput} name={`${field}`} id={`${field}`} />
                </Col>
                <Col xs="5" sm="4" md="5" lg="4" className="buttons">
                    <Button variant="fab" size="small" color="primary" onClick={() => addEntry(index)}>+</Button>
                    <Button variant="fab" size="small" color="danger" onClick={() => removeEntry(index)}>-</Button>
                </Col>
            </li>);
        })
    }

    return (
        fields.length &&
        <ul className="inputfield-list">
            { renderEntries() }
        </ul>
        || <Button onClick={() => fields.push('')}>Add</Button>
    )
}

Answer 1

好的，这个问题非常微妙，与React或Redux-Form无关。我忘了将type="button"放在添加/删除FieldArray项目的按钮上。

<Button variant="fab" size="small" color="primary" onClick={() => addEntry(index)}>+</Button>

这就是HTML表单的工作原理。