创建中选项卡式表单的独立 "Submit" 按钮

Question

我已经制作了两种创建页面：

创建单个记录。

从 xlsx 文件导入多条记录。

现在我想实现2个独立的按钮：

保存
导入

意思是当我点击按钮 1 时，只有按钮 1 有效。

这是我的代码：

<Create {...this.props}>
            <TabbedForm toolbar="">
                <FormTab label="Single record">
                    <ReferenceInput label="Centre" source="centre" reference="centre" sort={{ field: 'name', order: 'ASC' }} allowEmpty>
                        <SelectInput optionText="name" />
                    </ReferenceInput>
                    <TextInput source="fullname" />
                    <TextInput source="serial   " />
                    <TextInput source="birthday" />
                    <TextInput source="join_date" />
                    <TextInput source="remark" />
                    <SaveButton label="Save" redirect="show" submitOnEnter={true} />
                </FormTab>
                <FormTab label="Import from xlsx">
                    <ReferenceInput label="Centre" source="centre_import" reference="centre" sort={{ field: 'name', order: 'ASC' }} allowEmpty>
                        <SelectInput optionText="name" />
                    </ReferenceInput>
                    <label id="customLabel">
                        <input id="upload" ref={(input) => { this.textInput = input; }} type="file" hidden
                               onClick={(event)=> {
                                   event.target.value = null;
                               }}
                               onChange={
                                   (event) => {
                                       this.fileName.textContent = event.target.files[0].name;
                                   }
                               }
                        />
                        <FlatButton primary label="Select file" icon={<ActionFile />} onClick={() => {
                            this.textInput.click();
                        }}/>
                        <span id="fileName" ref={(span) => { this.fileName = span; }}></span>
                    </label>
                    <SaveButton label="Import" redirect={false} submitOnEnter={true} />
                </FormTab>
            </TabbedForm>
        </Create>

Answer 1

最简单的方法是在此处保留一个按钮。您可以在导入选项卡中添加一段文字，说明单击“保存”将导入文件。

但是，您仍然需要处理重定向。为此，您必须实施自定义 SaveButton:

将默认SaveButton的代码复制到SaveOrImportButton文件中。
更新其mapStateToProps函数并使用redux-form getFormValues selector检查表单值并确定其是否为输入。
利用这些知识自定义按钮：
- 如果用户选择了文件，您可以将标签更新为 Import。标签将在文件字段变脏后立即更新。
- 您可以在 L22 处更改重定向值。

在 Toolbar 组件内使用此按钮并将此组件传递给 Create 组件的 toolbar 属性。

创建中选项卡式表单的独立 "Submit" 按钮

Independent "Submit" button for tabbed form in Create

admin-on-rest