如何添加/移除屏幕resize事件并解决提交按钮截断问题

我的Web表单中有一个Submit按钮，正常状态下显示良好，但调整屏幕尺寸时，该按钮会被截断，效果如下：

以下是我的代码：

useEffect(() => {
    const handler = ev => {
      console.log(ev.data, src, ev.data.form);

      if (ev.data.type === "height") {
        if (ev.data.form === src) {
          setHeight((parseInt(ev.data.message, 10) + 10) + "px");
        }
      }
      if (ev.data.type === "popup") {
        if (ev.data.form === src) {
          setPopUpModel(ev.data.message);
        }
      }
    };

    if (typeof window !== "undefined") {
      window.addEventListener("message", handler);

      return () => window.removeEventListener("message", handler);
    }
  }, 

你提供的useEffect代码和按钮截断问题无关，这个问题是CSS布局导致的，给你几个可行的解决方向：

• 给提交按钮添加基础样式，防止文字被截断：

.submit-button {
  white-space: nowrap; /* 禁止按钮文字换行 */
  min-width: fit-content; /* 宽度自动适配内容 */
  box-sizing: border-box; /* 内边距不额外增加按钮总宽度 */
  padding: 0.5rem 1rem; /* 设置合理内边距，避免内容挤到边缘 */
}

• 检查按钮所在的容器，确保小屏幕下容器不会被强行压缩：

.button-container {
  overflow-x: auto; /* 容器宽度不足时允许横向滚动，避免内容截断 */
  min-width: 100%; /* 占满父容器宽度 */
}

• 如果是表单整体布局问题，用弹性布局让元素在小屏幕下自适应堆叠：

.form-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 元素之间保留间距，避免拥挤 */
}

另外，你的useEffect代码最后缺少依赖数组，建议补充上[src]，避免组件重复渲染时出现不必要的监听绑定：

useEffect(() => {
  const handler = ev => {
    console.log(ev.data, src, ev.data.form);

    if (ev.data.type === "height") {
      if (ev.data.form === src) {
        setHeight((parseInt(ev.data.message, 10) + 10) + "px");
      }
    }
    if (ev.data.type === "popup") {
      if (ev.data.form === src) {
        setPopUpModel(ev.data.message);
      }
    }
  };

  if (typeof window !== "undefined") {
    window.addEventListener("message", handler);
    return () => window.removeEventListener("message", handler);
  }
}, [src]); // 补充依赖数组

内容的提问来源于stack exchange，提问作者shahzad shah