在React

Question

我正在尝试使用redux-form的FieldArray动态添加Material-UI组件的集合，以便将这些组件以行样式进行排列，但改为以列样式进行。

我有：

const renderRows = ({ fields, meta: { error, submitFailed } }) => (
<React.Fragment>
    {fields.map((record, index) => (
        <div>
            <Grid item xs={4}>
                <Field name={`${record}.title`} component={renderField} type="text" label="Title" />
            </Grid>
            <Grid item xs={4}>
                <Field name={`${record}.artist`} component={renderField} type="text" label="Artist" />
            </Grid>
            <Grid item xs={2}>
                <Field name={`${record}.startdatetime`} component={renderField} type="datetime-local" />
            </Grid>
            <Grid item xs={2}>
                <Field name={`${record}.enddatetime`} component={renderField} type="datetime-local" />
            </Grid>
            <Button variant="contained" color="secondary" onClick={() => fields.remove(index)}>Delete</Button>
        </div>
    ))}
    <div>
        <Button variant="contained" color="primary" onClick={() => fields.push({})}>Add Record</Button>
    </div>
    {submitFailed && error && <span>{error}</span>}
</React.Fragment>

）

我这样称呼：

const FieldArraysForm = props => {
const { handleSubmit, pristine, reset, submitting } = props
return (
    <div>
        <Grid item xs={12} container spacing={8}>
            <FieldArray name="records" component={renderRows} />
        </Grid>
        <Button variant="contained" color="primary" disabled={submitting}>Submit</Button>
    </div>
);

}

结果是这样的：

注意：“ renderField”组件是一个动态TextField，在此已省略。