我正在使用 react-rnd ,并希望将其与hooks组件一起使用。从文档中的示例,我不了解如何实现它。使用类组件,我可以复制示例:
<Rnd
size={{ width: this.state.width, height: this.state.height }}
position={{ x: this.state.x, y: this.state.y }}
onDragStop={(e, d) => { this.setState({ x: d.x, y: d.y }) }}
onResizeStop={(e, direction, ref, delta, position) => {
this.setState({
width: ref.style.width,
height: ref.style.height,
...position,
});
}}
>
001
</Rnd>
我不了解...position
道具中的onResizeStop
发生了什么。
任何人都可以帮助我了解...position
在做什么以及如何将其变成一个钩子组件吗?
答案 0 :(得分:1)
这应该可行,或者至少可以给您一个想法:
const [state, setState] = useState({x:0, y:0, width:0, height:0});
<Rnd
size={{ width: state.width, height: state.height }}
position={{ x: state.x, y: state.y }}
onDragStop={(e, d) => { setState({...state, x: d.x, y: d.y}) }}
onResizeStop={(e, direction, ref, delta, position) => {
setState({
width: ref.style.width,
height: ref.style.height,
...position
})
}}
>
001
</Rnd>
您可以将...position
替换为以下部分:
setState({
width: ref.style.width,
height: ref.style.height,
x: position.x,
y: position.y
});
是一样的:)