我正在使用React-Admin框架,并希望将按钮操作组合到单个⋮
选项按钮中。
基本上,我想转一下:
进入这个!
我认为它看起来不太混乱,⋮
按钮被广泛用于更多选项。
是否有针对此的现有解决方案?或如何轻松完成?
编辑:我的解决方案:
MoreOptions.jsx
import * as React from "react";
import { Link, DeleteButton } from "react-admin";
import IconButton from "@material-ui/core/IconButton";
import QueueIcon from "@material-ui/icons/Queue";
import EditIcon from "@material-ui/icons/Edit";
import _objectWithoutProperties from "babel-runtime/helpers/objectWithoutProperties";
const MyEditButton = (props) => (
<IconButton
component={Link}
to={props.basePath + "/" + props.record.id}
color="primary"
aria-label="Edit"
>
<EditIcon style={{ fontSize: '20px' }} />
</IconButton >
);
const MyCloneButton = (props) => (
<IconButton component={Link} to={{
pathname: props.basePath + '/create',
state: {
record: _objectWithoutProperties(props.record, ['id', 'paxDbName'])
}
}} color="primary" aria-label="Clone">
<QueueIcon style={{ fontSize: '20px' }} />
</IconButton>
);
const EditCloneDelete = (props) => {
let a = props;
return <div>
<MyEditButton {...props} />
<MyCloneButton {...props} />
<DeleteButton basePath={props.basePath} record={props.record} resource={props.resource} label=""/>
</div>;
};
export default EditCloneDelete
posts.jsx
import EditCloneDelete from './MoreOptions.jsx';
效果很好!
答案 0 :(得分:2)
我的解决方案是创建一个新组件,将所有按钮封装到一个单元格中。我也没有显示标签。我敢肯定有一个更干净的解决方案,但是我的快速方法是:
const MyEditButton = (props) => (
<IconButton classes={{root: props.classes.buttonSize}} component={Link} to={
${props.basePath} + "/" + ${props.record.id}
} color="primary" aria-label="Edit" ><EditIcon style={{fontSize: '20px'}}/></IconButton>
);
const MyCloneButton = (props) => (
<IconButton classes={{root: props.classes.buttonSize}} component={Link} to={{
pathname: props.basePath + '/create',
state: {record: _objectWithoutProperties(props.record, ['id', 'paxDbName'])}
}} color="primary" aria-label="Clone"><QueueIcon style={{fontSize: '20px'}}/></IconButton>
);
const styles = {
buttonSize: {
width: "28px",
height: "28px",
},
};
const EditCloneDelete = (props) => {
let a = props;
return (
<div>
<a href={
`http://localhost:8001/api/v1/namespaces/kube-system/services/https:kubernetes-dashboard:/proxy/#!/overview?namespace=${props.record.customerName ? props.record.customerName : props.record.name}`
} target="dashboard">
<IconButton classes={{root: props.classes.buttonSize}} color="primary" aria-label="Edit"><img src={K8sIcon} style={{width: '20px', height: '20px'}}/></IconButton>
</a>
<MyEditButton {...props}/>
<MyCloneButton {...props}/>
<OptionalDeleteButton {...props} classes={{deleteButton: props.classes.buttonSize}} label={""} disabled={
!props.showDelete(props.record)
}/>
</div>
);
};
export default compose(withStyles(styles))(EditCloneDelete)
您可以轻松地创建一个一流的React组件,该组件是一个按钮容器,它将使该子表更加可重用。