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组件中使用此按钮，并将此组件传递给toolbar组件的Create道具。

“创建”中的选项卡式独立“提交”按钮

1 个答案: