使用带有react钩子的react-rnd

时间:2019-11-29 22:00:25

标签: reactjs

我正在使用 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在做什么以及如何将其变成一个钩子组件吗?

1 个答案:

答案 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 
});

是一样的:)