调整大小的反应只调整框的宽度，而不是高度

编程问答 2022-08-13

问题描述

我有一个正在使用React-mui draggable dialog的resizable box组件：

return (
  <StyledDialog
    open={open}
    classes={{root: classes.dialog,paper: classes.paper}}
    PaperComponent={PaperComponent}
    aria-labelledby="draggable-dialog"
  >
    <ResizableBox
      height={520}
      width={370}
      minConstraints={[300,500]}
      maxConstraints={[Infinity,Infinity]}
      className={classes.resizable}
    >
      <DialogContent classes={{root: classes.dialogContent}} id="draggable-dialog">
        <IconButton className={classes.clearIcon} aria-label="Clear" onClick={onClose}>
          <ClearIcon/>
        </IconButton>
        <iframe
          src={hjelpemiddel.url}
          title={hjelpemiddel.navn}
          width="100%"
          height="100%">
        </iframe>
      </DialogContent>
    </ResizableBox>
  </StyledDialog>
);

我想在对话框中调整iframe的大小以及ResizableBox。但是，看来我只能调整ResizableBox的宽度，而不能调整框的高度，至少最大高度似乎是最初设置的高度。如何解决该问题，以便也可以调整高度？

更新

CodesanBox可用here。

仅供参考，出于某些原因，有时会出现导入失败消息，但如果刷新codesandBox页面，一切正常。

解决方法

您可以绑定调整窗口大小的事件，计算新的高度和宽度，并将其传递给您的resizable-box 

object.addEventListener("resize",function() {
//Here you can write logic to apply resizing on the resizable-box
});
,

在您的CodeSandBox中，根据我的测试，同时触发了拖动和调整大小的事件。您可以使用react-draggable的{​​{3}}道具，以便在调整大小手柄是与之交互的组件时不会发生拖动。

<Draggable
  cancel={".react-resizable-handle"}
    ...

执行此操作时，在调整大小时，Draggable元素将不再更新其CSS transform: translate属性-为此，您可以选择控制Draggable组件的位置。根据需要平移/设置X和Y，以在调整大小时保留其位置。请注意，x和y状态和状态设置器应位于将作为道具传递的这些组件中的公共父/祖先。

export default function App() {
  // have the source of truth for the positions on a common parent/ancestor
  const [x,setX] = React.useState(0);
  const [y,setY] = React.useState(0);

  return (
    <div className="App">
      <PDFDialog x={x} y={y} setX={setX} setY={setY} />
    </div>
  );
}

...

class PDFDialog extends React.Component {
  state = {
    open: true
  };

  render() {
    const { open } = this.state;
    const { classes } = this.props;

    return (
      <StyledDialog
        open={open}
        classes={{ root: classes.dialog,paper: classes.paper }}
        PaperComponent={PaperComponent}
        aria-labelledby="draggable-dialog"
        PaperProps={{
          x: this.props.x,y: this.props.y,setX: this.props.setX,setY: this.props.setY
        }}
      >
        <ResizableBox
          height={520}
          width={370}
          minConstraints={[300,500]}
          maxConstraints={[Infinity,Infinity]}
          className={classes.resizable}
          onResize={(e) => {
            if (e.movementX !== 0) {
              this.props.setX((prev) => prev + e.movementX);
            } else if (e.movementY !== 0) {
              this.props.setY((prev) => prev + e.movementY / 2);
            }
          }}
        ></ResizableBox>

        ...

// refactored draggable component:
<Draggable
  position={{ x: x,y: y }}
  cancel={".react-resizable-handle"} // <-- cancel the dragging if resize is interacted with
  onDrag={(e) => {
    if (e.movementX !== 0) {
      setX((prev) => prev + e.movementX);
    }
    if (e.movementY !== 0) {
      setY((prev) => prev + e.movementY);
    }
  }}
>
  <Paper {...props} />
</Draggable>

cancel

（在我的CodeSandBox上，我摆脱了诸如最小height和width之类的约束，以清楚地显示示例）

,

很明显，react-resizable使用内联CSS处理盒子的 width 和 height ，对于您的问题，我模拟了此问题，请注意下面是Google chrome devTools的屏幕截图：

enter image description here

react-resizable-box有一个 important 标志，它会覆盖内联高度值，因此在视图中，我具有以下行为：

motion

您的信息还不够，所以我不能直接说出您的问题的原因，但是CSS覆盖很可能是此问题的根本原因。

因此，检查项目上的resizable-box并查找CSS覆盖。

添加后更新，重现了问题

实际上，基于我的最后一个答案，现在在重新制作沙箱中覆盖了height，我删除了iframe标签，一切正常，您传递了height="100%"属性放在您的iframe标签上，可以防止高度变化。另外，您将minConstraints={[300,500]}传递给ResizableBox组件，因此它的高度不能小于500px。

javascriptreact-materialreactjsreactjsreactjsreactjs