如何修复每个 <List> 项中的 ButtonGroup 组件

Question

我正在设置一个带有展开选项的组件，我想在每个列表项中添加一个带有列出选项的 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);

Answer 1

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