如何修复每个 <List> 项中的 ButtonGroup 组件 [关闭]

Posted 2023-02-22

【中文标题】如何修复每个 <List> 项中的 ButtonGroup 组件 [关闭]

【英文标题】：How to fix ‘ a ButtonGroup component inside every <List> items [closed]

【发布时间】：2019-12-11 05:13:52

【问题描述】：

我正在设置一个带有扩展选项的组件，我想在每个列表项中添加一个带有列出选项的 ButtonGroup。

const StackList = (props, permissions) => (
    <Card >
        <List ...props   pagination=false title=<AppTitle />>
            <Datagrid rowClick="expand" expand=<StackShow ...props  /> >
                <TextField source='name' />
                <TextField source='status' />
                <ReferenceField source='environment' label='Environment' reference='environments' allowEmpty>
                    <ChipField source='name' />
                </ReferenceField>
                <ReferenceArrayField source="hosts" label="Hosts" reference="hosts">
                    <SingleFieldList>
                        <ChipField source="name" />
                    </SingleFieldList>
                </ReferenceArrayField>
                permissions !== 'account-admin' &&<EditButton />
                permissions === 'account-admin' &&<DeleteButton />
                <SplitButton ...props  />
            </Datagrid>
        </List>
    </Card >
);

const enhance = compose(
    withStyles(classes),
);

export default enhance(StackList);

【问题讨论】：

您当前对<SplitButton> 组件的实现是什么？

@Kmaschta 它与 Material UI 在他们的演示中提供的实现相同：material-ui.com/components/buttons/#split-button

注意：React Admin v2.x 使用 Material UI v1.x，所以你的文档必须是 v1.material-ui.com 我们正在升级到 Material UI v4 和 React Admin v3 正在大力开发

【参考方案1】：

在您的SplitButton 组件onClick 处理程序中，您应该调用event.stopPropagation()，它不会冒泡到展开处理程序