问题描述
我正在使用 react-moveable 为某些组件提供拖放支持。我试图让控制框消失,直到用户点击目标。
所以首先,我想将一些 CSS 应用到控制框,但我似乎无法做到。文档指定可以设置 className,但由于某种原因它对我不起作用。
组件看起来像这样:
import React from "react";
import Moveable from "react-moveable";
import { makeMoveable,DraggableProps,ResizableProps,RotatableProps,Rotatable,Draggable,Resizable } from "react-moveable";
import MoveableHelper from "moveable-helper";
import styles from './label.module.css';
const Label = () => {
const [helper] = React.useState(() => {
return new MoveableHelper();
})
const targetRef = React.useRef<HTMLdivelement>(null);
return (
<div className="container">
<div>
name
</div>
<Moveable
className={styles.moveable1}
target={targetRef}
draggable={true}
resizable={true}
rotatable={true}
origin={false}
onDragStart={helper.onDragStart}
onDrag={helper.onDrag}
onResizeStart={helper.onResizeStart}
onResize={helper.onResize}
onRotateStart={helper.onRotateStart}
onRotate={helper.onRotate}
/>
</div>
);
};
export default Label;
和css模块文件label.module.css:
.moveable1 .moveable-line .moveable-direction {
background: red !important;
}
我尝试将 className 设置为字符串,在 css 文件中使用类名等等,但没有改变控制框样式。
有什么想法吗?
解决方法
- 控制框由缩放和渲染方向定义
我们可以让它消失(缩放默认为1)
zoom={0}
并修改/隐藏边框控件。 (默认)
renderDirections={["nw","n","ne","w","e","sw","s","se"]} )
然后您可以使用普通的 onClick 函数和 useState 钩子将一些样式应用到目标 div。
import React from "react";
import Moveable from "react-moveable";
import { makeMoveable,DraggableProps,ResizableProps,RotatableProps,Rotatable,Draggable,Resizable } from "react-moveable";
import MoveableHelper from "moveable-helper";
import styles from './label.module.css';
const Label = () => {
const [helper] = React.useState(() => {
return new MoveableHelper();
})
const targetRef = React.useRef<HTMLDivElement>(null);
const [styles,setStyles] = useState( {border: "1px solid green";} )
const handleStyles = e => {
// Your styles...
// Your setState Hook
setStyles({border: "1px solid blue"})
}
return (
<div className="container">
<div onclick={handleStyles} style={styles}>
name
</div>
<Moveable
className={styles.moveable1}
target={targetRef}
draggable={true}
resizable={true}
rotatable={true}
origin={false}
onDragStart={helper.onDragStart}
onDrag={helper.onDrag}
onResizeStart={helper.onResizeStart}
onResize={helper.onResize}
onRotateStart={helper.onRotateStart}
onRotate={helper.onRotate}
{ /** Hide the control box * / }
zoom={0}
renderDirections{["nw","ne"]}
/>
</div>
);
};
export default Label;
文档:
缩放类型: https://daybrush.com/moveable/release/latest/doc/Moveable.html#zoom
渲染方向:https://daybrush.com/moveable/release/latest/doc/Moveable.html#.RenderDirections
CSS 样式框: https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-directions
? style={{ background: 'yellow' }}
希望你觉得这有用。 问候, M。 ?