Question

我使用Drawer创建/显示/编辑页面.TabbedForm中有一个编辑页面，我无法访问所有FormTab。当我尝试在第一个FormTab中进行编辑时，它可以工作，但是另一个FormTab却不能它行不通，它消失了（我想是因为我没有在抽屉中包含第二个FormTab，但是对于Create来说，它工作得很好：-D）。总而言之，我不知道如何为第二个FormTab创建该附加路由。

class AdminList extends React.Component {
render() {
    const { push, classes, ...props } = this.props;
    return (
        <Fragment>
            <List
                {...props}
                sort={{ field: 'id', order: 'DESC' }}
                actions={<AdminListActions />}
            >
                <Datagrid rowClick="edit">
                    <TextField source="id" />
                    <NameField source="name" />
                    <TextField source="email" />
                    <TextField source="type" />
                    <FunctionField label="Permissions" render={record => `${(record.permissions === null) ? 'none' : objectList(record.permissions)}`} />
                    <ShowButton />
                    <EditButton />
                    <DeleteButton undoable={false} />
                </Datagrid>
            </List>
            <Route path="/admin/create">
                    {({ match }) => (
                    <Drawer
                        open={match ? true : false} 
                        anchor="right"
                        onClose={this.handleClose}
                    >
                        <AdminCreate
                            className={classes.drawerContent}
                            onCancel={this.handleClose}
                            {...props}
                        />
                    </Drawer>
                )}
            </Route>
            <Route path="/admin/:id/show">
                {({ match }) => {

                    const isMatch =
                        match &&
                        match.params &&
                        match.params.id !== 'create';

                        return (
                        <Drawer
                            open={!!isMatch}
                            anchor="right"
                            onClose={this.handleClose}
                        >
                            {isMatch ? (
                                <AdminShow
                                    className={classes.drawerContent}
                                    id={isMatch ? match.params.id : null}
                                    onCancel={this.handleClose}
                                    {...props}
                                />
                            ) : (
                                <div className={classes.drawerContent} />
                            )}
                        </Drawer>
                    );
                }}
            </Route>
            <Route path="/admin/edit/:id">
                {({ match }) => {

                    let isMatch =
                        match &&
                        match.params &&
                        (match.params.id !== 'create')
                        && match.isExact;

                    return (
                        <Drawer
                            open={(isMatch===true)}
                            anchor="right"
                            onClose={this.handleClose}
                        >
                            {isMatch ? (
                                <AdminEdit
                                    className={classes.drawerContent}
                                    id={isMatch ? match.params.id : null}
                                    onCancel={this.handleClose}
                                    {...props}
                                />
                            ) : (
                                <div className={classes.drawerContent} />
                            )}
                        </Drawer>
                    );
                }}
            </Route>

        </Fragment>
    );
}

我希望能够从TabbedForm编辑所有FormTab（以实际访问它们）。谢谢！另外，这是我的AdminEdit组件：

const AdminEdit = ({ onCancel, ...props }) => (
<Edit undoable={false} title=" " {...props}>
    <TabbedForm toolbar={<AdminEditToolbar onCancel={onCancel} />}>
        <FormTab label="main">
            <DisabledInput source="id" />
            <DisabledInput source="businessId" />
            <TextInput source="name" />
            <TextInput source="email" validate={required()} />
            <TextInput source="password" validate={required()} />
            <TextInput source="type" />
        </FormTab>
        <FormTab label="permissions">
            <CustomCheckbox {...props} />
        </FormTab>
    </TabbedForm>
</Edit>

Answer 1

拥有一个codesandbox会有所帮助，以便我们可以付诸实践。但是，我认为这是因为您的编辑路线过于严格。实际上，我们也将选项卡安装在子路由内：/admin/edit/:id/:tab。默认情况下，每个标签都只分配了一个数字作为其路径，但是您可以使用其path属性

覆盖它

如何为TabbedForm创建路由react-admin

1 个答案: